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

前端之家收集整理的这篇文章主要介绍了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-elementstransform旋转来创建如下所示的轮廓横幅:

>这个有角度的形状是使用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.f2er.com/html/231855.html

猜你在找的HTML相关文章