高级技巧之css三角

最新推荐文章于 2023-04-11 10:00:22 发布

倔强的小白菜

最新推荐文章于 2023-04-11 10:00:22 发布

阅读量140

点赞数

分类专栏：前端基础文章标签： css3 前端 css

本文链接：https://blog.csdn.net/weixin_47481102/article/details/125094598

版权

前端基础专栏收录该内容

51 篇文章 2 订阅

订阅专栏

网页中常见一些三角形，使用css直接画出来就可以，不必做成图片或者字体图标。

一张图就知道css三角是怎么做出来的，如下：

div {

width:0;

height:0;

line-height:0;

font-size:0;

border:50px solid transparent;

border-left-color:pink;

}

练习：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三角制作</title>
    <style>
      .box1 {
        /* 三角制作高度、宽度是0 */
        height: 0;
        width: 0;
        /*为了照顾兼容性*/
        line-height:0;
        font-size:0;
        border-top: 10px solid blue;
        border-right: 10px solid red;
        border-bottom: 10px solid pink;
        border-left: 10px solid orange;
      }

      .box2 {
        width: 0;
        height: 0;
        /* 只做一个三角形，边框设置为transparent，三角形的边框设置为需要的颜色 */
        border: 20px solid transparent;
        border-left-color: pink;
        margin: 100px auto;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

案例一：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三角制作案例</title>
    <style>
      .jd {
        position: relative;
        width: 120px;
        height: 249px;
        background-color: pink;
      }

      .jd span {
        /*子绝父相*/
        position: absolute;
        right: 15px;
        top: -10px;
        width: 0;
        height: 0;
        /* 为了照顾兼容性 */
        line-height: 0;
        font-size: 0;
        border: 5px solid transparent;
        border-bottom-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="jd">
      <span></span>
    </div>
  </body>
</html>

案例二：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三角制作案例</title>
    <style>
      .box {
        position: relative;
        width: 249px;
        height: 150px;
        background-color: aqua;
      }

      .box span {
        position: absolute;
        right: -10px;
        top: 70px;
        width: 0;
        height: 0;
        line-height: 0;
        font-style: 0;
        border: 5px solid transparent;
        border-left-color: aqua;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span></span>
    </div>
  </body>
</html>