标签:content lin rgba tran image 效果 font height war
如图效果,两边是四个直角三角形定位拼接出来的
html:
<div class="award"> <div class="triangle"> <span class="triangle1"></span> <span class="triangle2"></span> </div> <span class="award-content">北京示范平台<b class="award-dot">·</b>2020-2021</span> <div class="triangle"> <span class="triangle3"></span> <span class="triangle4"></span> </div> </div>
css:
.award-content{ float: left; padding: 0 34px; line-height: 40px; height: 40px; background: #c42a22; color: #fff; font-size: 18px; } .award-dot{ font-size: 22px; margin: 0 24px; } .triangle{ float: left; position: relative; height: 40px; } .triangle4{ position: absolute; left: 0; top: 0; width: 0; height: 0; border-top: 20px solid #c42a22; border-right: 20px solid transparent; } .triangle1{ position: absolute; right: 0; top: 0; width: 0; height: 0; border-top: 20px solid #c42a22; border-left: 20px solid transparent; } .triangle3{ position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-bottom: 20px solid #c42a22; border-right: 20px solid transparent; } .triangle2{ position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-bottom: 20px solid #c42a22; border-left: 20px solid transparent; }
标签:content lin rgba tran image 效果 font height war
原文地址:https://www.cnblogs.com/wangduojing/p/14765764.html