用css绘制三角形

最新推荐文章于 2024-06-19 14:48:22 发布
最新推荐文章于 2024-06-19 14:48:22 发布
阅读量295 收藏 2
点赞数
分类专栏： 前端开发 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43077362/article/details/105773630
版权

一、

.tri1 {
            width: 0; height: 0;
            border-color: red blue red blue;
            border-width: 50px 50px 50px 50px;
            border-style: solid;
     }

在这里插入图片描述
二、

.tri2 {
            width: 0; height: 0;
            border-color: red blue blue red;
            border-width: 50px 50px 50px 50px;
            border-style: solid;
        }

在这里插入图片描述
三、

.tri3 {
            width: 0; height: 0;
            border-color: transparent red; /*上下颜色 左右颜色*/
            border-width: 0 0 50px 50px;
            border-style: solid;
        }

在这里插入图片描述
四、

.tri4 {
            width: 0; height: 0;
            border-color: red transparent; /*上下颜色 左右颜色*/
            border-width: 0 0 50px 50px;
            border-style: solid;
        }

在这里插入图片描述
五、

.tri5 {
            width: 0; height: 0;
            border-color: red transparent; /*上下颜色 左右颜色*/
            border-width: 0 50px 50px 0;
            border-style: solid;
        }

在这里插入图片描述
六、

.tri6 {
            width: 0; height: 0;
            border-color: transparent red; /*上下颜色 左右颜色*/
            border-width: 0 50px 50px 0;
            border-style: solid;
        }

在这里插入图片描述
七、绘制五角星

 /*五角星 由三个等边三角形拼接而成*/
        #star-five {
            position: relative;
            width: 0; height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid #039ae9;
            transform: rotate(35deg);
            margin: 50px;
        }
        #star-five::before {
            content: "";
            position: absolute; top: 3px; right: -95px;
            width: 0; height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid #039ae9;
            transform: rotate(-70deg);
        }
        #star-five::after {
            content: "";
            position: absolute; top: 6px; right: -96px;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid #039ae9;
            transform: rotate(-145deg);
        }

在这里插入图片描述
八、Triangle Up

 #triangle-up {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
    }

在这里插入图片描述
九、Triangle Down

 #triangle-down {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 100px solid red;
    }

在这里插入图片描述
十、Triangle Left

#triangle-left {
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-right: 100px solid red;
      border-bottom: 50px solid transparent;
    }

在这里插入图片描述
A、Triangle Right

#triangle-right {
      width: 0;
      height: 0;
      border-top: 50px solid transparent;
      border-left: 100px solid red;
      border-bottom: 50px solid transparent;
    }

在这里插入图片描述
B、Curved Tail Arrow
在这里插入图片描述

 #curvedarrow {
      position: relative;
      width: 0;
      height: 0;
      border-top: 9px solid transparent;
      border-right: 9px solid red;
      transform: rotate(10deg);
    }
    #curvedarrow:after {
      content: "";
      position: absolute;
      border: 0 solid transparent;
      border-top: 3px solid red;
      border-radius: 20px 0 0 0;
      top: -12px;
      left: -9px;
      width: 12px;
      height: 12px;
      transform: rotate(45deg);
    }

C、Pentagon
在这里插入图片描述

  #pentagon {
      position: relative;
      width: 54px;
      box-sizing: content-box;
      border-width: 50px 18px 0;
      border-style: solid;
      border-color: red transparent;
    }
    #pentagon:before {
      content: "";
      position: absolute;
      height: 0;
      width: 0;
      top: -85px;
      left: -18px;
      border-width: 0 45px 35px;
      border-style: solid;
      border-color: transparent transparent red;
    }

D、Heart （via Nicolas Gallagher）
在这里插入图片描述

#heart {
      position: relative;
      width: 100px;
      height: 90px;
    }
    #heart:before,
    #heart:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
      width: 50px;
      height: 80px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    #heart:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }

E、Infinity
在这里插入图片描述

 #infinity {
      position: relative;
      width: 212px;
      height: 100px;
      box-sizing: content-box;
    }
    #infinity:before,
    #infinity:after {
      content: "";
      box-sizing: content-box;
      position: absolute;
      top: 0;
      left: 0;
      width: 60px;
      height: 60px;
      border: 20px solid red;
      border-radius: 50px 50px 0 50px;
      transform: rotate(-45deg);
    }
    #infinity:after {
      left: auto;
      right: 0;
      border-radius: 50px 50px 50px 0;
      transform: rotate(45deg);
    }

F、Yin Yang
在这里插入图片描述

 #yin-yang {
      width: 96px;
      box-sizing: content-box;
      height: 48px;
      background: #eee;
      border-color: red;
      border-style: solid;
      border-width: 2px 2px 50px 2px;
      border-radius: 100%;
      position: relative;
    }
    #yin-yang:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      background: #eee;
      border: 18px solid red;
      border-radius: 100%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
    }
    #yin-yang:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      background: red;
      border: 18px solid #eee;
      border-radius: 100%;
      width: 12px;
      height: 12px;
      box-sizing: content-box;
    }

G、Pointer
在这里插入图片描述

  #pointer {
      width: 200px;
      height: 40px;
      position: relative;
      background: red;
    }
    #pointer:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 20px solid white;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
    }
    #pointer:before {
      content: "";
      position: absolute;
      right: -20px;
      bottom: 0;
      width: 0;
      height: 0;
      border-left: 20px solid red;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
    }

————————————————
更多css绘制的图形请参考：
https://css-tricks.com/the-shapes-of-css/
方法参考：https://blog.csdn.net/w214019153/article/details/52469866

郁美人
关注
专栏目录
CSS：N种使用CSS 绘制三角形的方法
Yummy的博客
04-13 3万+
目录 6种使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形 2、使用 linear-gradient 绘制三角形 3、使用 conic-gradient 绘制三角形 4、transform: rotate 配合 overflow: hidden 绘制三角形 5、使用 clip-path 绘制三角形 6、利用字符绘制三角形 6种使用 CSS 实现三角形的技巧 1、使用 border 绘制三角形 使用 border 实现三角形应该是大部分人都掌握的，也是各种面经中经常出现的
纯CSS绘制三角形（各种角度）
10-26
### CSS绘制三角形详解 #### 一、引言 在前端开发中，使用CSS来创建图形元素变得越来越普遍。通过巧妙地利用边框属性，我们可以仅使用CSS就绘制出多种多样的图形，如圆形、矩形甚至是三角形。本文将详细介绍如何...
用css画三角形
04-10
用纯css绘制三角形，不是用图片
【css】绘制三角形
坚强的泡沫的博客
03-08 230
简单三角形的绘制 原理： 利用元素的border属性 为元素添加border属性， <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css绘制三角形</title> <style> div{ width: 50px; height: 50px; border: 2px solid red; } &
CSS绘制三角形
hichinamobile的博客
06-20 286
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here #triangle-up { width: 0; height: 0; border-left: 50px solid transparent;
css绘制三角形
weixin_46429281的博客
08-05 1万+
css绘制三角形 /运用实例
用CSS代码绘制三角形 纯CSS绘制三角形的代码
09-25
### 使用CSS绘制三角形 #### 引言 随着前端技术的发展与创新，CSS不仅局限于网页布局与样式的美化，还能实现一些有趣的图形绘制功能。本文将详细介绍如何仅使用CSS来绘制一个三角形，并深入探讨其背后的原理和技术...
CSS绘制三角形的实现代码(border法)
09-22
总结来说，CSS绘制三角形的核心在于理解边框的本质和绝对定位的使用。通过调整元素的宽度、高度、边框宽度以及颜色，可以创建出各种形状和大小的三角形，从而在网页设计中实现复杂的布局和视觉效果。
CSS绘制三角形（含代码）
bide_tootight的博客
04-09 1893
（1）我们先来看看下面这段代码：div#tr1{width: 0px;height: 0px;border: 30px solid #F00; }想想这会是怎样一个图形？直接上图，看下面： 对，就是一个正方形。如果你不理解，说明你对css中的盒子模型还不了解，需要去补充一下这方面的知识。（2）继续，上面（1）的代码也可以写成如下形式，运行结果是一样的，我就不上图了。div#tr1{width: 0...
使用纯css绘制三角形
weixin_44594219的博客
03-11 223
使用css绘制三角形
CSS绘制好看的三角形
ljyahaha的博客
10-21 152
CSS三角形之美 div{ /*CSS边框可以模拟三角形效果*/ width:0; height:0; border-top:10px solid red; border-right:10px solid green; border-bottom:10px solid pink; border-left:10px solid blue; } 注意事项: 高度和宽度均设置为0; 四个边框都要写，若只想留下相应三角形，只留下需要的颜色，其他的设置为tran
纯css绘制三角形图标
flowRight的博客
05-06 943
.carset{ display: inline-block; width: 0px; height:0px; border-style: solid; border-width: 8px; border-color: transparent transparent transparent red; } 效果如下 ![在这里插入图片描述]...
CSS绘制三角形--border法
weixin_44399953的博客
08-26 168
1.实现一个简单的三角形 使用css盒模型中的border (边框) 即可实现如下所示的三角形： 实现原理: 在为元素添加border的时候，border的样子；假设有如下代码： <div></div> div { width: 50px; height: 50px; border: 2px solid orange; } 效果图： 这是我们平常使用border最普遍的情况——往往只给border一个较小的宽度（通常为1-2px）；然而这样的日常用法就会容易
css怎么绘制一个三角形
最新发布
Twinkle_sone的博客
06-19 2345
在CSS中画三角形通常利用border属性来实现，通过设置三个边的宽度为0，并为一个边提供颜色，结合transform属性进行旋转，可以创建一个三角形。
如何用css绘制一个三角形
热门推荐
m0_53206841的博客
07-12 1万+
问题描述：用css绘制一个三角形，其实是利用视觉的效果，将三个边设置成相同的颜色，另一个边设置其他颜色，再通过设置四个边的形状绘制出三角效果的图形步骤：1、写一个宽高为0的盒子2、选择三角形的底边，将此边界设置为一个颜色，另外三边设置另一个颜色（一般设置白色），即可显示三角效果示例： 生成的三角效果如下： 可以根据自己的实际需要，和其他形状进行拼接完成想要的效果，或设置相应颜色、边界长度、边界样式完成想要的效果。...
如何用css绘制一个三角形？
巷子里的老张先生
11-28 1070
通常我们在开发过程中，像一些播放器的暂停按钮、或者是一些下拉框等等，都会用到三角形。一般我们会使用一些svg或者是icon图标来替代，那么有没有想过该怎么去绘制一个三角形呢？废话多说，接下来跟着咱们步伐一步一步往下走。
CSS border法绘制三角形详解
"CSS绘制三角形的实现代码(border法)" CSS是一种强大的样式语言，用于定义网页元素的布局、颜色、字体等视觉表现。在CSS中，利用边框(border)属性可以巧妙地创建出各种形状，其中包括三角形。本文将详细解释如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值