如何用CSS写一个三角形

来源：互联网发布：java培训贷款骗局流程编辑：程序博客网时间：2024/05/16 18:22

用CSS写一个三角形，代码如下：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>CSS三角形</title>    <style type="text/css">        .div1 {            width: 0;            height: 0;            border-style: solid;            border-width: 20px;            border-color: transparent transparent red transparent;        }        .div2 {            width: 0;            height: 0;            border-style: solid;            border-width: 20px;            border-color: transparent transparent red transparent;            border-radius: 20px;        }    </style></head><body>    <div class="div1"></div>    <div class="div2"></div></body></html>

运行的结果是：这里写图片描述

盒子模型其实可以看成是由12个梯形和内容区的矩形组成，当内容区没有内容（即矩形不存在），就可以看成是由三角形组成。所以给border设置样式，宽度和颜色，再用transparent属性值将不需要的部分设置为透明，就可以得到上图的三角形。如果再给border设置圆角，就可以得到一个扇形。

0 0