HTML – 如何制作倾斜的色带

概述如何使用CSS创建如下图像的功能区.我知道如何制作带有文字的倾斜填充盒子,但我挣扎着襟翼. 这是codepen link 以下是如何执行此 *** 作的示例.它基本上由一个父级div制成,它具有带状文本和另外两个div,以在顶部和底部产生色带的折叠部分.折叠部分根据需要定位.   body { font-size: 18px; color: #FFF;}.container { margi 如何使用CSS创建如下图像的功能区.我知道如何制作带有文字的倾斜填充盒子,但我挣扎着襟翼.

这是codepen link

解决方法 以下是如何执行此 *** 作的示例.它基本上由一个父级div制成,它具有带状文本和另外两个div,以在顶部和底部产生色带的折叠部分.折叠部分根据需要定位.

 

body {  Font-size: 18px;  color: #FFF;}.container {  margin: 50px 100px;}.ribbon {  position: absolute;  wIDth: 400px;  text-align: center;  background: #000;  padding: 20px 5px 20px 5px;  -webkit-transform: skew(1deg,-15deg);  -moz-transform: skew(1deg,-15deg);  -o-transform: skew(1deg,-15deg);  -ms-transform: skew(1deg,-15deg);  transform: skew(1deg,-15deg);  /* Note: The best practice is to always add the un-prefixed standards version as last */}.ribbon_before {  height: 25px;  wIDth: 50px;  position: relative;  border: 2px solID black;  top: 116px;  left: 2px;}.ribbon_after {  height: 25px;  wIDth: 50px;  position: relative;  border: 2px solID black;  top: -56px;  left: 355px;}

<div >  <div class='ribbon_before'>&nbsp;</div>  <div >LOREM IPSUM DolOR SIT AMET</div>  <div class='ribbon_after'>&nbsp;</div></div>

Demo on CodePen

注意：通过使用单个div和几个伪元素也可以实现相同的效果,如下面的代码段所示.

body {  Font-size: 18px;  color: #FFF;}.ribbon {  margin: 100px 100px;  position: relative;  wIDth: 400px;  text-align: center;  background: #000;  padding: 20px 5px 20px 5px;  -webkit-transform: skew(1deg,-15deg);}.ribbon:before {  height: 25px;  wIDth: 50px;  position: absolute;  content: '';  border: 2px solID black;  bottom: -8px;  left: 0px;  -webkit-transform: skew(-1deg,15deg);  -moz-transform: skew(-1deg,15deg);  -o-transform: skew(-1deg,15deg);  -ms-transform: skew(-1deg,15deg);  transform: skew(-1deg,15deg);}.ribbon:after {  height: 25px;  wIDth: 50px;  position: absolute;  content: '';  border: 2px solID black;  top: -8px;  right: 0px;  -webkit-transform: skew(-1deg,15deg);}

<div >LOREM IPSUM DolOR SIT AMET</div>

解决方案由OP调整以满足他们的需求：

我已经调整了一些代码来提升它以接近’像素完美’,这里是最后一个链接http://cdpn.io/zwDir

总结

以上是内存溢出为你收集整理的HTML – 如何制作倾斜的色带全部内容，希望文章能够帮你解决HTML – 如何制作倾斜的色带所遇到的程序开发问题。

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