我需要实现两件事。一个是标题栏，将保留一个标题，然后以对角线右边框结束，然后还需要通过CSS以这种方式生成的可变宽度对角线图案（http://grab.by/DhPO）。我尝试过使用各种解决方案，但是大多数解决方案都是通过border属性生成条带和对角线切割的，这对帮助并没有太大帮助，因为除非我应用绝对定位，否则它不能包含文本。有什么聪明的办法吗？
最近的尝试是使用http://jsfiddle.net/spdawson/HhZQe/light/-但是，我无法将其移动tl到trborder的位置。对于第二种解决方案，我还没有发现任何有用的东西，也不知道该怎么办。
您可以在:after：pseudo-element上为第一个图像和linear-gradient第二个图像使用一个三角形。
为了得到削减，部分linear-gradient已设置为transparent。
body {
background: url(http://www.lorempixel.com/600/400/sports/) no-repeat;
width: 100%;
height: 100%;
margin: 0;
}
div {
margin: 10px;
}
#one {
position: relative;
width: 200px;
height: 50px;
background: #324660;
color: #F5F4F4;
font-size: 17px;
text-align: center;
line-height: 50px;
}
#one:after {
content: '';
position: absolute;
width: 0;
height: 0;
right: -39px;
top: 0;
border-top: 50px solid #324660;
border-right: 40px solid transparent;
}
#two {
position: relative;
width: 500px;
height: 50px;
background: linear-gradient(135deg, #324660, #324660 56%, #F96620 56%, #F96620 66%, #D1D7DB 66%, #D1D7DB 68%, transparent 68%, transparent 83%, #D1D7DB 83%, #D1D7DB 85%, #F96620 85%);
color: #F5F4F4;
line-height: 50px;
text-align: left;
padding-left: 20px;
}
span {
font-size: 17px;
}<div id="one">1. Marketing:</div>
<div id="two"><span>Benefits</span> for facilities, therapists and patients</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句