我想在网站上的一些元素上添加一个标签,并设计一个标签,标签底部是倒V形切口.
到目前为止我有这个：
HTML
<div class="css-shapes"></div>
CSS
.css-shapes{ border-left: 99px solid #f00fff; border-right: 99px solid #f00fff; border-bottom: 39px solid transparent; }
http://jsfiddle.net/yhexkm4u/2/
但是,我需要背景为白色,并以紫色和1px为边界.我试图在这个内部装入相同形状的白色,但是一切都变得混乱,并没有像预期的那样.
解决方法
这是一个略有不同的方法,使用
pseudo-elements和
transform旋转来创建如下所示的轮廓横幅：
>这个有角度的形状是使用position：absolute伪元素创建的：：before和：after：
>多余的东西被溢出：隐藏在父母身上以形成我们的横幅：
>使用Box-shadow创建轮廓,通过拉动/推动x轴46px防止两个角度重叠 – Box-shadow：46px 0 0 3px#000
完整的例子
div {
height: 100px;
width: 100px;
margin: 100px auto;
position: relative;
overflow: hidden;
border: solid 3px #000;
border-bottom: none;
text-align: center;
}
div:before,div:after {
content: '';
display: block;
height: 100%;
width: 200%;
transform: rotate(20deg);
Box-shadow: 46px 0 0 3px #000;
position: absolute;
top: 1px;
right: -120%;
}
div:after {
transform: rotate(-20deg);
left: -120%;
Box-shadow: -46px 0 0 3px #000;
}
<div>Text</div>
