个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一些显示“短信”气泡的 HTML 和 CSS。要创建气泡，使用 CSS 类 .bub。然后，使用 .bub:after 构建三 Angular 形。
我很难根据其父颜色更改由 :after 伪元素创建的 CSS 形状的颜色。
改变由 div:after 伪元素创建的三 Angular 形的颜色。会有很多颜色，所以为每种颜色编写不同的类会太麻烦。
这是简化的 CSS 和 HTML:
<!DOCTYPE html>
<html lang="en">
<div id="container">
<head>
<style>
.bub {
width: 275px;
display: table-cell;
position:relative;
padding:10px;
margin:1em 0 3em;
color:#fff;
background:#075698;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.bub:after {
content:"";
position:absolute;
bottom:-20px;
left:50px; /* controls horizontal position */
border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
border-style:solid;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
.bub.left {
left: -100px;
}
.bub.left:after {
top:16px;
left:-40px; /* value = - border-left-width - border-right-width */
bottom:auto;
border-width:10px 40px 0 0; /* vary these values to change the angle of the vertex */
border-color: transparent #333;
}
body {
padding:0;
margin:0;
font:1em/1.4 Cambria, Georgia, sans-serif;
color:#333;
background:#fff;
}
#container {
width:275px;
padding:0 0 50px;
margin:0 auto;
}
.blue {
background: blue;
border-color: blue;
}
.green {
background: green;
border-color: green;
}
.red {
background: red;
border-color: red;
}
</style>
</head>
<body>
<div class="content">
<br><br>
<div class="bub left blue">Test 1</div>
<br>
<div class="bub left green">Test 2</div>
<br>
<div class="bub left red">Test 3</div>
</div>
</div>
</body>
</html>
最佳答案
如果您要更改形状的颜色，则由 ::after 创建伪元素；
既然你设置了border-color每个 .bub 元素上的属性，您可以简单地为 :after 伪元素使用 inherit 值，如下所示:
.bub.left:after {
border-color: transparent inherit;
}
来自 MDN :
The inherit CSS-value causes the element for which it is specified to take the computed value of the property from its parent element. It is allowed on every CSS property.
关于css - 更改由 :after pseudo-element as its parent? 创建的 CSS 形状的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22438725/
25
4
0
我是 TensorFlow 菜鸟。我已经从 deeppose 的开源实现中训练了一个 TensorFlow 模型，现在必须针对一组新图像运行该模型。 该模型是在大小为 100 * 100 的图像上训练
我正在尝试以这种方式设置节点的大小: controller[shape=circle,width=.5,label="Controller",style=filled,fillcolor="#8EC1
是否有 VBA 代码可以在选择的每个单元格周围添加文本框。文本框应该是单元格的大小(类似于边框)？ 最佳答案 您可以使用 .AddTextbox方法。循环遍历您选择的单元格，并使用单元格的尺寸属性来设
我有一个变量 a尺寸 (1, 5) 我想“平铺”的次数与我的小批量的大小一样多。例如，如果小批量大小为 32，那么我想构造一个张量 c维度为 (32, 5)，其中每一行的值与原始 (1, 5) 变量
我在使用 javaFX 时遇到问题。我想每 1000 毫秒在应用程序窗口中显示一次时间。 public class Main extends Application { StackPane root
所以我目前正在创建这个 API。这个登录类应该只创建一个场景，其中包含制作 GUI 所需的所有框。我遇到的问题是，单击时我的形状不会执行任何操作。我有事件监听器，但它不起作用。 import
我正在用 python turtle 画一些东西，我使用了形状函数，但是形状 overdraw 了它们之前的其他形状(我可以看到形状在移动)，并且我只得到了最后一个形状: `up() goto(-20
我正在读取多个 .csv 文件作为具有相同形状的 panda DataFrame。对于某些索引，某些值为零，因此我想选择具有相同形状的每个索引的值，并为相同的索引放置零值并删除零以成为相同的形状: a
我有一个简单的二维网格，格式为 myGrid[x,y] 我正在尝试找到一种方法来找到围绕选定网格的周长，这样我就有了一个可供选择的形状。 这是我的意思的一个例子: 这里的想法是找到所有相关的“角”，也
我有一个网络层，用于调用多个端点。我想减少重复代码的数量，并认为也许我可以将响应模型作为端点的一部分传递。 这个想法是不需要多个仅因响应而不同的函数，我可以调用我的网络层并根据路径进行设置。 我看到的
我正在创建一个自定义 ImageView，它将我的图像裁剪成六边形并添加边框。我想知道我的方法是否正确，或者我是否以错误的方式这样做。有很多自定义库已经在执行此操作，但开箱即用的库中没有一个具有我正在
我正在编写一些代码，这些代码需要识别一些基于节点云的相当基本的几何图形。我会对检测感兴趣: 板(简单有界平面) 圆柱体(两个节点循环) 半圆柱(圆弧+直线+圆弧+直线) 圆顶(n*loop+top n
我有这个形状: http://screencast.com/t/9UUhAXT5Wu 但边界在截止点处没有跟随它 - 我该如何解决？ 这是我当前 View 的代码: self.view.backgro
我现在脑震荡，所以我想问一个非常简单的问题。 目前，我正在尝试打印出这样的开头 当输入为 7 时，输出为 * ** * ** * ** * 这里是我的代码，它打印 14 次而不是 7 次，或者当我输入
我想生成如下设计。计划选项卡顶部的"new"。我使用的属性适用于 chrome 和 mozilla，但在 Edge 中出现故障。 以下是我在 chrome 中应用的样式: a.subnav__item
我想要一个带有两种颜色边框轮廓的 shape 元素。我可以使用 solid 元素做一个单一的颜色轮廓，但这只允许我画一条线。我尝试在我的形状中使用两个 stroke 元素，但这也不起作用。 有没有办法
我需要为屏幕上的形状着色任何我想要的颜色。我目前正在尝试使用 UIImage 来执行此操作，我想根据自己的需要重新着色。据我所知，执行此操作的唯一方法是获取 UIImage 的各个像素，这需要更多我想
因此，经过多年的 OOP，我从我的一门大学类(class)中得到了一个非常简单的家庭作业，以实现一个简单的面向对象的结构。 要求的设计: 实现面向对象的解决方案以创建以下形状: 椭圆、圆形、正方形、矩
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
我想知道是否可以使用类似于以下的 div 制作复杂的形状: 它基本上是一个四 Angular 向内收缩的圆 Angular 正方形。目标是使用背景图像来填充它。我可以使用具有以下 SVG 路径的剪辑蒙
我是一名优秀的程序员,十分优秀！