CSS3 制作三角形

最新推荐文章于 2025-08-15 16:20:39 发布

转载最新推荐文章于 2025-08-15 16:20:39 发布 · 68 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/shichangcheng/blog/399142

文章标签：

#python

2019独角兽企业重金招聘Python工程师标准>>>

最近闲来无事，突然想了解如何制作三角形

首先我们通过下面的例子来了解一下border[也许你会说border的属性谁不会啊？属性大家度会用，但是一个特性你可能没有发现，而这个特性就是制作三角形的关键，大神级的请忽略这个]

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三角形</title>
    <style type="text/css">
        .triangle{
             border-bottom: 20px solid #000000;
             border-top: 20px solid transparent;
             border-right: 20px solid #ffff00;
         }
        .triangle1{
            border-right: 20px solid #ffff00;
        }

        .triangle2{
            border-bottom: 20px solid #000000;
            border-right: 20px solid #ffff00;
        }
    </style>
</head>
<body>

<p class="triangle" style="height: 120px;width: 120px;background-color: red;"></p>
<p class="triangle1" style="height: 120px;width: 120px;background-color: red;"></p>
<p class="triangle2" style="height: 120px;width: 120px;background-color: red;"></p>

</body>
</html>

效果：

嘿嘿，不知道通过这三个图片你们有没有发现什么？在两个边框的交界处会出现一个三角形。

因此我们可以通过这个特性来得到一个三角形。

具体：一个边框使用背景色，一个边框使用透明的，这样就会形成一个三角形，但是当你给这个div一个高度时，你会发现你得到的是一个梯形，这时你需要取消这个div的高度，这样就能到三角形。至于三角形所对应的方向可以通过 transform 这个属性来旋转。

 <style type="text/css">
        .triangle{
             border-bottom: 20px solid #000000;
             border-top: 20px solid transparent;
             border-right: 20px solid #ffff00;
         }
 </style>

<p class="triangle" style="height: 120px;width: 120px;background-color: red;">

最后给大家一个网站是最有腾讯QQ LOGO的文章，比较实用。通过这个文章以及源码你可以制作多种图形。

http://www.alloyteam.com/wp-content/demos/css3-tencent-qq-logo-basic/

加油

转载于:https://my.oschina.net/shichangcheng/blog/399142