如图效果,两边是四个直角三角形定位拼接出来的
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; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。