CSS三角形

最新推荐文章于 2023-09-05 16:23:33 发布
最新推荐文章于 2023-09-05 16:23:33 发布
阅读量498 收藏 2
点赞数 3
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56787796/article/details/115681271
版权

CSS三角形

CSS三角形

<!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 {
        width: 0;
        height: 0;
        border-top: 30px solid rgb(55, 0, 255);
        border-right: 30px solid rgb(255, 0, 43);
        border-bottom: 30px solid rgb(0, 255, 21);
        border-left: 30px solid rgb(229, 255, 0);
      }
      .box2 {
        margin: 100px auto;
        width: 0;
        height: 0;
        /* 四个三角形全部隐藏，哪个有颜色就显示哪个三角形 */
        border: 70px solid transparent;
        border-left-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

1

常用样式

<!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 {
        /* 子绝父相 */
        position: relative;
        width: 150px;
        height: 250px;
        background-color: blue;
      }
      .box1 span {
        position: absolute;
        right: 20px;
        top: -40px;
        width: 0;
        height: 0;
        /* 为了照顾兼容性 */
        line-height: 0;
        font-size: 0;
        border: 20px solid transparent;
        border-bottom-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <span></span>
    </div>
  </body>
</html>

1

直角三角形

<!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 {
        width: 0;
        height: 0;
        /* 1.只保留右边的边框有颜色 */
        border-color: transparent red transparent transparent;
        /* 2. 样式都是solid */
        border-style: solid;
        /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
        border-width: 100px 50px 0 0;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>

3

溯琳
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS实现三角形的四种方法
m0_60237095的博客
04-11 3万+
css三角形的实现
CSS实现三角形（详细）
qq_61716556的博客
11-29 2万+
三角形的广泛应用 网页设计中我们常常能见到各类三角形，比如二级菜单，下拉列表，三角形作为一个简单的图标能够清晰明了的表明页面的模块和功能。在具体的页面设计过程中可以直接使用背景图片实现，也可以通过CSS代码实现三角形功能。因一般设计时CSS实现三角形简单快捷，这里推荐使用CSS实现三角形。除非三角形图片特别细致精美，优于直接代码实现效果。 三角形具体实现原理 一般盒模型的四个边框的连接处由于颜色统一导致细节部分被忽略。当把一个盒子边框设置为四种颜色时，边框处的细节便暴露出来。细节如下。 可以看到
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】CSS实现三角形
Code for fun !!! 【博客主要为本人服务】
06-04 9970
如何用CSS实现三角形
css三角形、居中、圣杯布局
09-01
css三角形、居中、圣杯布局
stylus-triangle:用于生成 CSS 三角形的 Stylus mixin
06-07
手写笔三角形发生器使用 Stylus 生成 CSS 三角形的小混合。用法 triangle(width, height, direction, color) .make-me-a-triangle-babytriangle(10px, 10px, 'bottom', #000)新产品经理 npm install stylus-triangle...
css实现三角形.zip
03-06
通过css代码去实现三角形，用在网页开发中，演示通过css去实现菜色的矩形、上三角形、下三角形、右三角形、左三角形。
css 三角形样式
07-07
css 三角形样式,样式表,css样式,三角形样式,css三角
css实现三角形的几种方法
忧郁的蛋的专栏
08-21 4698
css实现三角形的方法：1、使用边框实现三角形，利用透明边框和实色边框的组合，可以创建不同方向和大小的三角形；2、使用伪元素实现三角形，通过使用伪元素来创建一个占据父元素一半大小的实心三角形；4、使用clip-path属性实现三角形，通过定义多个点的坐标可以创建不同形状的三角形。这种方法通过设置元素的边框来实现三角形，利用透明边框和实色边框的组合，可以创建不同方向和大小的三角形。这种方法通过使用clip-path属性来裁剪元素的形状，通过定义多个点的坐标可以创建不同形状的三角形。
【CSS】CSS实现三角形（一）
流萤梦的博客
08-20 3524
如何使用border和linear-gradient实现三角形
css中实现三角形的几种方式
小陈的博客
05-25 5381
前言 写了几个小特效的代码，发现对于用纯css实现非常规的图形这个小技能，还是有点云里雾里的，所以以三角形为例，特此记录一下。 实现方式 实现方式目前为止，我知道的有6种，欢迎补充。 HTML代码 <body> <div class="triangle1"></div> <div class="triangle2">▼</div> <div class="triangle3"></div> &
css绘制三角形
weixin_46429281的博客
08-05 1万+
css绘制三角形 /运用实例
css实现三角形的6种方法
weixin_42582523的博客
11-26 8763
在一些面试经验中，经常能看到有关css的题目都会有一道如何使用css绘制三角形，而常见的回答通常也只有使用border进行绘制一种方法。 而css发展到今天，其实有很多有意思的仅仅使用css就能绘制出来的三角形的方式，本文将展示6中使用css绘制三角形的方式，而且它们都很好掌握。 当然本文是抛砖引玉，css日新月异，可能还有一些有意思的方法本文遗漏了，欢迎大家在留言区补充。
css布局技巧-css三角巧妙运用
阿牛的博客
02-15 4571
上期我们写了css三角，这期我们写css三角巧妙运用，用案例学习。
用CSS实现三角形
weixin_44231176的博客
07-19 1588
用CSS实现三角形 一、原理 三角形实现原理：宽度width为0；height为0； （1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。 （2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。 更详细的原理解析请见博客：用纯css3绘制三角形的
css实现三角形
weixin_42998230的博客
08-22 716
.sanjiao { position: absolute; right: 0px; top: 0px; width: 0px; height: 0px; border-top:35px solid #d32f27; border-left: 35px solid transparent; } <div class="sanjiao"></div>
CSS 实现三角形
最新发布
wu_2004的博客
09-05 127
【代码】CSS 实现三角形。
CSS实现三角形
qq_43232501的博客
12-04 356
CSS实现三角形
css三角形
06-02
在 CSS 中，可以使用伪元素 `::before` 或 `::after` 来创建三角形。下面是两种常见的方法： 1. 利用边框实现三角形： ```css .triangle { width: 0; height: 0; border-top: 50px solid transparent; border-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值