html – 如何将’div’塑造为CSS的标志

我想在网站上的一些元素上添加一个标签,并设计一个标签,标签底部是倒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>

原文地址：https://www.jb51.cc/html/231855.html