我需要做两件事.一个是标题栏,它将保持标题,然后以对角线右边框结束,然后还需要以这种方式通过CSS生成的可变宽度对角线图案(
http://grab.by/DhPO).我尝试过使用各种各样的解决方案,但是大多数都是通过边框属性生成条带和对角线切割,除非我应用绝对定位,否则它不会包含文本.有什么聪明的方法吗？
最近的尝试是在http://jsfiddle.net/spdawson/HhZQe/light/ – 然而,我无法将tl移动到tr边界的位置.对于第二个解决方案,我还没有找到任何有用的东西,根本不知道如何处理它.
解决方法
您可以使用三角形：after：第一个图像的伪元素和第二个图像的线性渐变.
为了获得切割,线性渐变的部分已设置为透明.
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>
