我有一个CSS箭头框覆盖在图像滑块上,但我需要使尾巴缩进并透明,以便在其后面看到图像。需要将白色部分设置为透明。请参见下面的附加图像和我的CSS代码。谢谢。
```css .arrow_box { position: relative; background: #fff; border: 1px solid #ccc; }
.arrow_box:after, .arrow_box:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrow_box:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 10px; margin-left: -10px; }
.arrow_box:before { border-color: rgba(204, 204, 204, 0); border-bottom-color: #ccc; border-width: 11px; margin-left: -11px; } ```
```css .arrow_box { position: relative; background: #fff; border: 1px solid #ccc; }
.arrow_box:after, .arrow_box:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; }
.arrow_box:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 10px; margin-left: -10px; }
.arrow_box:before { border-color: rgba(204, 204, 204, 0); border-bottom-color: #ccc; border-width: 11px; margin-left: -11px; } ```
#flag {
width: 400px; height: 80px; background: #231f20; position: relative;
}
#flag:before {
content: "";
position: absolute;
top: 0;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 35px solid white;
}
#flag:after {
content: "";
position: absolute;
left: 400px;
bottom: 0;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 45px solid #231f20;
}
border-left: 35px solid white;
更改为solid transparent
吗?能否提供一个fiddle示例? - adamdc78