原理

主要是通过CSS边框来实现的，边框粗细决定这三角大小。
给盒子宽高为0，给显示的边框添加颜色，其余边框为透明色即可。

第一种方法

定义一个盒子box，并设置宽高分别为0，给border的每一个边都设置宽度、实线以及颜色

  <style>.box {width: 0;height: 0;border-top: 100px solid red;border-bottom: 100px solid greenyellow;border-left: 100px solid blueviolet;border-right: 100px solid orange;}</style><body><div class="box"></div>
</body>

运行结果

现在咱们得到是一个正方形，但是也能看出来他是由四个三角形拼接而成的，但是咱们要使它变成三角形，就用到一个属性transparent，表示背景透明

只显示上面红色的三角，所以其他的边框的颜色都设置为transparent

<style>.box {width: 0;height: 0;border-top: 100px solid red;border-bottom: 100px solid transparent;border-left: 100px solid transparent;border-right: 100px solid transparent;}
</style><body><div class="box"></div>
</body>

运行结果

第二种方法

给每个边框都设置为20px并且为透明，在通过设置border-width属性来设置边框的宽度，再根据给哪侧设置了宽度给他设置颜色

border-width: 1px 2px 4px 5px;
/* 上 | 右 | 下 | 左 */
她的值可以是一个，两个，三个或四个跟margin的属性类似

  <style>.left {width: 0;height: 0;border: 20px solid transparent;border-width: 40px 0 0 20px;border-left-color: red;}.right {width: 0;height: 0;border: 20px solid transparent;border-width: 40px 20px 0 0;border-right-color: #f99;}</style><body><div class="left"></div><div class="right"></div>
</body>

运行结果

使用CSS写一个三角形相关推荐

android三角形切图软件,还在为小三角形切图？使用纯CSS写一个简单的三角形
同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 .icon{width:20px;height:20px;display:block;margi ...
[css] CSS画一个三角形，CSS绘制空心三角形
1.不同理解的边框 <div class="border"></div> .border {width: 50px;height: 50px;border: ...
[css] 用css创建一个三角形，并简述原理
[css] 用css创建一个三角形,并简述原理 width: 0;height: 0;margin: 100px auto;border-top: 50px solid transparent;bor ...
[css] 用CSS绘制一个三角形
[css] 用CSS绘制一个三角形 .triangle{width: 0;border-bottom: 35px solid lightgreen;border-left: 35px solid tr ...
[css] 请使用css写一个多级的下拉菜单
[css] 请使用css写一个多级的下拉菜单 <!DOCTYPE html> <html lang="en"><head><meta ch ...
[css] 请用css写一个扫码的加载动画图
[css] 请用css写一个扫码的加载动画图 @Keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rot ...
[css] 写一个动画，向上匀速移动100px，向下以1.5倍速度移动200px，一直反复循环
[css] 写一个动画,向上匀速移动100px,向下以1.5倍速度移动200px,一直反复循环 .animation-block {width: 50px;height: 50px;backgroun ...
[css] 写一个高度从0到auto的transition动画
[css] 写一个高度从0到auto的transition动画写不了吧,max-height 定值倒是可以个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一 ...
[css] 使用css写一个垂直翻转图片的效果
[css] 使用css写一个垂直翻转图片的效果 transform: rotateX(180deg); /* 垂直镜像翻转 */ 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持 ...

使用CSS写一个三角形

原理

第一种方法

第二种方法

使用CSS写一个三角形相关推荐

最新文章

热门文章