用css3画三角形

最新推荐文章于 2023-11-12 19:00:00 发布

原创最新推荐文章于 2023-11-12 19:00:00 发布 · 587 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3

html-css 专栏收录该内容

25 篇文章

订阅专栏

.triangle_first{width: 0px;height: 0px;border-top: 100px solid red;border-right: 100px solid transparent}

<div class="triangle_first"></div>

效果：
这里写图片描述

.triangle_first-clone{border-top: 50px solid red;border-left: 50px solid red;border-right: 50px solid transparent;border-bottom:50px solid transparent;width: 0px;height: 0px;}

<div class="triangle_first-clone"></div>

效果：
这里写图片描述

.triangle_second{width: 0;height: 0;border-width: 100px;border-style: solid;border-color:red transparent transparent transparent;}

<div class="triangle_second"></div>

效果：
这里写图片描述

.triangle_third{width: 0;height: 0;border-width: 100px;border-style: solid;border-color:red blue black pink;}

<div class="triangle_third"></div>

效果：
这里写图片描述

.triangle_forth{width:50px;height: 50px;border-width: 100px;border-style: solid;border-color:red blue black pink;}

 <div class="triangle_forth"></div>

效果：
这里写图片描述

.triangle_sixth{width: 50px;height: 50px;border-top: 100px solid red;border-right: 100px solid black;border-bottom: none;border-left: 100px solid pink}

  <div class="triangle_sixth"></div>