共计 5111 个字符,预计需要花费 13 分钟才能阅读完成。
1. 给一个矩形设置 border,来看如何变动
<section>
<h4> 来看一个失常的矩形变动过程 </h4>
<div class="b">
<div class="b1"> 设置了 border 失常宽高 </div>
<div class="b2">border-top</div>
<div class="b3">border-right</div>
<div class="b4">border-left</div>
<div class="b5">border-bottom</div>
<div class="b6">background</div>
</div>
</section>
.b{
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
font-size: 10px;
text-align: center;
}
.b1{
width: 100px;
height: 70px;
border:5px solid #00aaff;
margin-right: 10px;
margin-bottom: 10px;
}
.b2{
width: 100px;
height: 70px;
border:5px solid #00aaff;
border-top: 5px solid #ff557f;
margin-right: 10px;
margin-bottom: 10px;
}
.b3{
width: 100px;
height: 70px;
border:5px solid #00aaff;
border-top: 5px solid #ff557f;
border-left: 10px solid #550000;
margin-right: 10px;
margin-bottom: 10px;
}
.b4{
width: 100px;
height: 70px;
border:5px solid #00aaff;
border-top: 5px solid #ff557f;
border-left: 10px solid #550000;
border-right:15px solid #3EFF8B;
margin-right: 10px;
margin-bottom: 10px;
}
.b5{
width: 100px;
height: 70px;
border:5px solid #00aaff;
border-top: 5px solid #ff557f;
border-left: 10px solid #550000;
border-right:15px solid #3EFF8B;
border-bottom:20px solid #ffff7f;
margin-right: 10px;
margin-bottom: 10px;
}
.b6{
width: 100px;
height: 70px;
background: pink;
border:5px solid #00aaff;
border-top: 5px solid #ff557f;
border-left: 10px solid #550000;
border-right:15px solid #3EFF8B;
border-bottom:20px solid #ffff7f;
margin-right: 10px;
margin-bottom: 10px;
}
2. 扭转矩形的宽高
当矩形的宽或者高为 0 的时候,呈现了梯形 + 三角形。
矩形的宽高都为 0 的时候,呈现了三角。
从这一步,咱们就能够大抵的晓得这个梯形,三角形是怎么造成的了。
3. 当矩形的高为 0 时
去掉 border-top,咱们能够失去下图第二个图片,当将 border-left 和 border-right 设置为 transparent 时候,呈现梯形。将这个梯形用 rotate 进行抉择,能够失去一个向下的梯形。
同理,去掉 border-bottom,border-left 和 border-right 设置为 transparent 时,也能够失去一个向下的梯形。
<div class="b10"> 高为 0,呈现梯形 + 三角 </div>
<div class="b11"> 去掉 border-top</div>
<div class="b11-tixing"><p> 失去梯形 </p></div>
<div class="b11-tixing-rotate"><p>rotate 旋转 </p></div>
.b10{
width: 50px;
height: 0;
background: pink;
border-top: 60px solid #ff557f;
border-left: 60px solid #550000;
border-right:60px solid #3EFF8B;
border-bottom:60px solid #ffff7f;
margin-right: 20px;
margin-bottom: 10px;
}
.b11{
width: 50px;
height: 0;
border-left: 60px solid #550000;
border-right:60px solid #3EFF8B;
border-bottom:60px solid #ffff7f;
margin-right: 20px;
margin-bottom: 10px;
}
.b11-tixing,.b11-tixing-rotate{
width: 50px;
height: 0;
border-left: 60px solid transparent;
border-right:60px solid transparent;
border-bottom:60px solid #ffff7f;
margin-right: 20px;
margin-bottom: 10px;
}
.b11-tixing-rotate{transform: rotate(-180deg);
}
.b11-tixing-rotate p{transform: rotate(180deg);
}
设置其余状况,也能失去一些想要的图形。
4. 当矩形的宽为 0 时
宽度为 0 的时候,能够失去相应的梯形,当然这个梯形也能够应用 rotate 旋转得来,办法并不惟一,晓得即可。
5. 当矩形的宽高皆为 0 时
当矩形的宽高皆为 0 时,能够看到设置不同的 border 时候,呈现了很多三角形。
6. 实心三角
如果你想得到一个向下的等腰三角,那么你只须要
(1):去掉 border-bottom
(2):将 border-left 和 border-right 变成 transparent
能够这么了解:设置相应的两边为 transparent,一个上三角,那就设置 border-bottom,去掉 border-top,下三角,设置 border-top,去掉 border-bottom。左三角,设置 border-right,右三角设置 border-left。
若你想得到一个向右直角三角形:
(1):只需设置两边即可,border-top,border-right
(2):border-right 设置为 transparent
其余的能够多试试,能够发现是有法则存在的。
<section>
<h4> 实心三角来了 </h4>
<div class="b">
<div class="b25"></div>
<div class="b26"></div>
<div class="b27"></div>
<div class="b28"></div>
<div class="b29"></div>
<div class="b30"></div>
<div class="b31"></div>
<div class="b32"></div>
<div class="b33"></div>
</div>
</section>
.b25{
width: 0;
height: 0;
border-top: 80px solid #A8C992;
border-left: 80px solid transparent;
border-right:80px solid transparent;
margin-right: 20px;
margin-bottom: 10px;
}
.b26{
width: 0;
height: 0;
border-bottom: 80px solid #A8C992;
border-left: 80px solid transparent;
border-right:80px solid transparent;
margin-right: 20px;
margin-bottom: 10px;
}
.b27{
width: 0;
height: 0;
border-left: 80px solid #A8C992;
border-top: 40px solid transparent;
border-bottom:40px solid transparent;
margin-right: 20px;
margin-bottom: 10px;
}
.b28{
width: 0;
height: 0;
border-right: 80px solid #A8C992;
border-top: 40px solid transparent;
border-bottom:40px solid transparent;
margin-right: 20px;
margin-bottom: 10px;
}
.b29{
height: 0;
width: 0;
border-color: #6c94c2 #193eaf transparent transparent;
border-style: solid solid dashed dashed;
border-width: 40px 40px 0 0;
margin-right: 20px;
margin-bottom: 10px;
}
.b30{
height: 0;
width: 0;
border-top: 40px solid #a4d1eb;
border-right: 80px solid transparent;
}
.b31{
height: 0;
width: 0;
border-bottom: 40px solid #a4d1eb;
border-right: 80px solid transparent;
}
.b32{
height: 0;
width: 0;
border-top: 40px solid #aa007f;
border-left: 80px solid transparent;
}
.b33{
height: 0;
width: 0;
border-bottom: 40px solid #aa007f;
border-left: 80px solid transparent;
}
7. 空心三角
实现原理:先失常定义一个实心三角,利用伪元素,在定义一个比实心三角稍小一点的一个色彩为红色的三角。
.b34{
width: 0;
height: 0;
border-top: 80px solid #A8C992;
border-left: 80px solid transparent;
border-right:80px solid transparent;
margin-right: 20px;
margin-bottom: 10px;
position: relative;
}
.b34::after{
content: "";
position:absolute;
top: -79px;
left: -78px;
width: 0;
height: 0;
border-top: 78px solid #fff;
border-left: 78px solid transparent;
border-right:78px solid transparent;
}
8. 等边箭头
实现一个箭头有两种形式:
1. 设置相应的宽高(宽和高必须相等,否则失去的是一个长度不一的箭头),并且设置 border-top 和 border-right,失去以下:
利用 transform: rotate(-45deg)进行旋转失去不同角度的箭头。
**2. 不设置宽高,设置 padding 值,padding 的值越大,这个箭头就越大,如,padding:5px。
再利用利用 transform: rotate(-45deg)进行旋转失去不同角度的箭头。**
9. 等腰箭头
原理:先失常定义一个实心三角,利用伪元素,在定义一个比实心三角稍小一点的一个色彩为红色的三角。对这个大的三角进行一部分的笼罩,实现等腰三角箭头。
10. 实现提示框
原理:
一个失常的圆角矩形 + 一个空心三角形
(这个空心三角形是两个伪元素实现的三角形,其中一个三角形背景色为红色并且小于有色彩的三角形)
11. 一些其余款式,能够通过伪元素失去
多尝试,会发现很多不一样的货色。
12. 例子源码(继续更新中)
https://gitee.com/susuhhhhhh/css_demos