前端CSS绘制三角符号▶️(上下左右/左下/右上/左下/右上三角)

Random=_=

于 2024-04-26 15:54:35 发布

阅读量498

点赞数 11

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/Tian_std_scu/article/details/138221390

版权

该篇文章介绍了如何利用HTML和CSS来创建不同方向的三角符号，包括上、下、左、右以及左下、右下、左上和右上四个组合，展示了基本的CSS布局技巧。

摘要由CSDN通过智能技术生成

大概思路是这样：

在这里插入图片描述

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>三角符号</title>
    <!-- <style>
      .triangle-up{
        width: 0;
        height: 0;
        border-left: 50px solid transparent; /* 设置左边框的样式为50px的实线，颜色为透明。这样创建了一个看不见的直角三角形的左边 */
        border-right: 50px solid transparent;/* 设置右边框的样式为50px的实线，颜色为透明。这样创建了一个看不见的直角三角形的右边。 */
        border-bottom: 100px solid red;/* 设置底边框的样式为100px的实线，颜色为红色。这样创建了一个有颜色的三角形的底边。*/
      }
    </style> -->
    <style>
      .triangle-up{
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid black;
        margin-bottom: 10px;
      }
      .triangle-down{
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid black;
      }
      .triangle-left{
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-right: 100px solid black;
      }
      .triangle-right{
        width: 0;
        height: 0;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 100px solid black;
      }
      .triangle-left-bottom{
        width: 0;
        height: 0;
        border-right: 50px solid transparent;
        border-bottom: 100px solid black;
      }
      .triangle-right-bottom{
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-bottom: 100px solid black;
      }
      .triangle-left-top{
        width: 0;
        height: 0;
        border-right: 50px solid transparent;
        border-top: 100px solid black;
      }
      .triangle-right-top{
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-top: 100px solid black;
      }
    </style>

  </head>

  <body>
    <div>
      <p>上下左右三角</p>
      <div class="triangle-up"></div>
      <div class="triangle-down"></div>
      <div class="triangle-left"></div>
      <div class="triangle-right"></div>   
    </div>
    <div>
      <p>左下，右下，左上，右上三角</p>
      <div style="display: inline-block;" class="triangle-left-bottom"></div>
      <div style="display: inline-block;" class="triangle-right-bottom"></div>
      <div style="display: inline-block;" class="triangle-left-top"></div>
      <div style="display: inline-block;" class="triangle-right-top"></div>
    </div>
    
  </body>
  
</html>