css绘制三角形原理

最新推荐文章于 2025-05-14 17:03:41 发布

转载最新推荐文章于 2025-05-14 17:03:41 发布 · 178 阅读

CC 4.0 BY-SA版权

原文链接：https://www.mk2048.com/blog/blog.php?id=b2kb0bchj&title=css%E7%BB%98%E5%88%B6%E4%B8%89%E8%A7%92%E5%BD%A2%E5%8E%9F%E7%90%86

文章标签：

#css绘制三角形

前端专栏收录该内容

493 篇文章

订阅专栏

1、新建一个元素，将它的宽高都设置为0；然后通过设置border属性来实现三角形效果，下面是css绘制三角形的原理：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
      .caret{
  height:0;/*将宽高都设置为0*/
  width:0;
  border:100px solid #000;
  border-color:red green yellow blue;
}
p{color:red;}
    </style>
</head>
<body>
<div class="caret"></div>
<p>
 将宽高都设置为0<br/>
 border-color:red green yellow blue;将变宽四个方向颜色设置成不同的颜色以便观察
</p>
</body>
</html>

效果:(为了jsfiddle防止被屏蔽,上面已插入了源代码)

style="height: 300px; width: 100%;" src=" https://jsfiddle.net/4gsyyjkz/embedded/result,css,html,js/" width="320" height="240">

从上面的效果可以看到，四个三角形拼成了一个正方形，我们只要把其中一个想要的三角形保留下来，其他的设置为透明的，就可以达到想要的效果了；

如border-color：red transparent transparent transparent；就能看到一个红色三角形

效果：

style="height: 300px; width: 100%;" src=" https://jsfiddle.net/4gsyyjkz/1/embedded/result,css,html,js/" width="320" height="240">

但是ie6不支持transparent，所以没有透明效果，这就需要把border-style：solid dashed dashed dashed；实现了透明效果；

2、如果要实现直角对着45度斜线方向的三角形，可以将两个三角形拼在一起来实现；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
      .caret{
  height:0;/*将宽高都设置为0*/
  width:0;
  border:100px solid #000;
  border-color:red green transparent transparent;
  border-style:solid solid dashed dashed;
}
p{color:red;}
    </style>
</head>
<body>
<div class="caret"></div>
<p>
 border-color:red green transparent transparent transparent;
 border-style:solid solid dashed dashed;
</p>
</body>
</html>

效果:

style="height: 300px; width: 100%;" src=" https://jsfiddle.net/4gsyyjkz/3/embedded/result,css,html,js/" width="320" height="240">

注意：此方法在ie6中，会有个行高撑开了，需要把行高设置为0，line-heiht:0；

下面用css绘制三角形的原理来绘制一个三角形气泡

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>除去列表最后一个li的底边框</title>
    <style>
        body,p{margin:0;padding:0;}
        #container{
            margin:0 auto;
            position:relative;
            width:400px;
            height:100px;
            border:10px solid #81A7FF;
        }
        #caret{
            position:absolute;
            width:50px;
            height:50px;
            left:100px;
            bottom:-50px;
        }
        .triangle1,.triangle2{

            display:block;
            height:0;/*将宽高都设置为0*/
            width:0;
            line-height:0;
            border-style:solid dashed dashed dashed;
        }
        .triangle1{
            border-width:50px;
            border-color:#81A7FF transparent transparent transparent;
        }
        .triangle2{
            position: absolute;
            top:-14px;/*这个数据三角函数是计算出来的*/
            border-width:50px;
            border-color:#fff transparent transparent transparent;
        }
        p{color:#81A7FF;text-align: center;line-height: 100px;}
    </style>
</head>
<body>
<div id="container">
    <div id="caret">
        <span class="triangle1"></span>
        <span class="triangle2"></span>
    </div>
    <p>
        css绘制三角形气泡
    </p>
</div>
</body>
</html>