用边框写一个箭头朝右的三角形

  设置一个div盒子，给盒子设置实际宽高为0，设置边框粗细、实线，给某三个边框颜色为透明色，另一个边框实际颜色即可。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
border-top: 20px solid red;
border-right: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
width: 0;
height: 0;
}
</style>
</head>
<body>
<!--
***实现的思路：
首先画4个方向的边框，每个方向颜色先给不一样的，再看你要选择哪个方向，就把其他方向的边框颜色设为透明色；最后添加宽高为0。
-->
<div class="box"></div>
</body>
</html>

posted @ 2021-06-22 10:56  JSkolo_yyds  阅读(150)  评论(0)    收藏  举报