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

到目前为止我有这个：

HTML

<div ></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>

总结

以上是内存溢出为你收集整理的html – 如何将’div’塑造为CSS的标志全部内容，希望文章能够帮你解决html – 如何将’div’塑造为CSS的标志所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。