本文主要讲述利用 border 属性做出不同的几何形状从而适用于比较好看的视觉样式
预备知识
border 相关属性
border-width 边框的宽度
border-style 边框的样式
border-color 边框的颜色
案例举例
为了更加通俗易懂, demo 用的是最简单的 dom 元素和 CSS 属性
- <div class="border">
- <div class="border-left"> 商品介绍 </div>
- <div class="border-icon"></div>
- <div class="border-right"> 商品评价 </div>
- </div>
- .border{
- margin: 50px auto;
- width: 540px;
- font-size:18px;
- line-height: 40px;
- text-align: center;
- }
- .border-left{
- width: 260px;
- height: 40px;
- background: #f3941d;
- float: left;
- color: #fff;
- }
- .border-icon{
- width: 0px;
- height: 0;
- border-width: 40 20 0 0;
- border-style: solid;
- border-color: #f3941d #f5d7b7 #f3941d #f3941d;
- float: left;
- }
- .border-right{
- width: 260px;
- height: 40px;
- float: right;
- background: #f5d7b7;
- color: #aaa;
- }
上面的 css 代码重点在于左边较深颜色与右边较浅颜色中间有一个三角形. border-icon
- <div class="content">
- <div class="border">
- <div class="small-triangle"></div>
- <div class="text"> 介绍 </div>
- <div class="big-triangle"></div>
- </div>
- </div>
- .content{
- margin: 60px auto;
- width: 540px;
- height: auto;
- position: relative;
- border-top: 1px solid #ddd;
- }
- .border{
- position: absolute;
- margin-top: -15px;
- margin-left: 20px;
- }
- .text{
- background: #e14340;
- height: 70px;
- width: 60px;
- line-height: 80px;
- color: #fff;
- text-align: center;
- }
- .small-triangle{
- position: absolute;
- width: 0;
- height: 0;
- border-width: 15px 10px 0px 0px;
- border-style: solid;
- border-color: #fff #c33a37 #ccc #ddd;
- margin-left: -10px;
- }
- .big-triangle{
- width: 0;
- height: 0;
- border-width: 8px 30px;
- border-style: solid;
- border-color: #e14340 #e14340 #fff #e14340;
- }
上面的 css 代码重点在于左边较深颜色的小三角. small-triangle 和底部的三角. big-triangle
原理解析
那么 border 属性是如何变化出不同的几何形状呢?
- .border1 {
- width: 0;
- height: 0;
- border - width: 20px 20px 20px 20px;
- border - style: solid;
- border - color: #aaa#bbb#ccc#ddd;
- }
看看上述样式产生的是一个什么样子的内容
我们通过 border-width border-color 可以任意变化每一条变的宽高, 和颜色
任意组合就能组成不同的由三角形组成的其它几何形状了
来源: https://segmentfault.com/a/1190000013175008