css三角形做法(上手快)

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

css

四个三角形

效果：

效果图

样式：

 .angle{
            margin: 100px auto;
            width: 0;
            height: 0;
            border-top: 20px solid pink;
            border-right: 20px solid red;
            border-left: 20px solid blue;
            border-bottom: 20px solid orange;
        }

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .angle{
            margin: 100px auto;
            width: 0;
            height: 0;
            border-top: 20px solid pink;
            border-right: 20px solid red;
            border-left: 20px solid blue;
            border-bottom: 20px solid orange;
        }
    </style>
</head>
<body>
    <div class="angle"></div>
</body>
</html>

左侧三角形

效果：

左侧三角形图片

样式：

 .angle{
            margin: 100px auto;
            width: 0;
            height: 0;
            /* 四个边框设置为透明 */
            border: 20px solid transparent;
            /* 左侧设置边框样式 */
            border-left: 20px solid red;
        }

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .angle{
            margin: 100px auto;
            width: 0;
            height: 0;
            /* 四个边框设置为透明 */
            border: 20px solid transparent;
            /* 左侧设置边框样式 */
            border-left: 20px solid red;
        }
    </style>
</head>
<body>
    <div class="angle"></div>
</body>
</html>

右侧三角形

效果：

右侧三角形

样式：

.angle{
            margin: 100px auto;
            width: 0;
            height: 0;
            /* 四个边框设置为透明 */
            border: 20px solid transparent;
            /* 右侧设置边框样式 */
            border-right: 20px solid blue;
        }

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .angle{
            margin: 100px auto;
            width: 0;
            height: 0;
            /* 四个边框设置为透明 */
            border: 20px solid transparent;
            /* 右侧设置边框样式 */
            border-right: 20px solid blue;
        }
    </style>
</head>
<body>
    <div class="angle"></div>
</body>
</html>

上边三角形

效果：

上边三角形

样式：

 .angle{
            margin: 100px auto;
            width: 0;
            height: 0;
            /* 四个边框设置为透明 */
            border: 20px solid transparent;
            /* 上边设置边框样式 */
            border-top: 20px solid orange;
        }

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .angle{
            margin: 100px auto;
            width: 0;
            height: 0;
            /* 四个边框设置为透明 */
            border: 20px solid transparent;
            /* 上边设置边框样式 */
            border-top: 20px solid orange;
        }
    </style>
</head>
<body>
    <div class="angle"></div>
</body>
</html>

下边三角形

效果：

下边三角形

样式：

.angle{
            margin: 100px auto;
            width: 0;
            height: 0;
            /* 四个边框设置为透明 */
            border: 20px solid transparent;
            /* 下边设置边框样式 */
            border-bottom: 20px solid pink;
        }

代码：

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .angle{
            margin: 100px auto;
            width: 0;
            height: 0;
            /* 四个边框设置为透明 */
            border: 20px solid transparent;
            /* 下边设置边框样式 */
            border-bottom: 20px solid pink;
        }
    </style>
</head>
<body>
    <div class="angle"></div>
</body>
</html>

注意：

  1. width:0 宽度为0
  2. height：0 高度为0
  3. 对边框设置样式
yrfjygb
关注
专栏目录
初相识——HTML5 盒模型
qq_52908359的博客
04-12 713
目录 1.关于什么是盒模型 2.每个盒模型的基本组成： 3.内边距的注意事项： 4.边框（border）的主要实现属性： （1）一些线的实现 5.外边距（margin）的主要实现属性： （1）.叠压现象 （2）.塌陷问题 ...
html5盒子模型
weixin_33912638的博客
06-02 260
相关博客： Flex 布局教程：语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex 布局教程：实例篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html 转载于:https://www.cnblogs.com/XingXiaoMeng/...
css怎么绘制一个三角形
最新发布
Twinkle_sone的博客
06-19 1509
在CSS中画三角形通常利用border属性来实现，通过设置三个边的宽度为0，并为一个边提供颜色，结合transform属性进行旋转，可以创建一个三角形。
HTML——盒模型
weixin_64804275的博客
04-12 1万+
盒模型
HTML 盒子模型
m0_65066169的博客
10-07 2963
这个就是调节盒子的功能,你也可以内边距的一些属性方向来自由添加,一定要多动手。值是变的,根据自己的需要,自由添加,根据需要的方向,多动手。根据我写的代码多动手,加油!
CSS绘制三角形
weixin_30924239的博客
01-17 162
1、新建一个元素，随便什么元素，不过我习惯性的会用块元素来做。如果行内元素就display:block它。 <div class="triangle"></div> 2、把它的宽高设置为height:0px; width:0px; 3、设置边框border属性，用来实现三角形。 首先要了解border具体是怎么样的，我写了一个这样的样式： border:50px ...
css:border样式制作几何图形（圆形&三角形）
weixin_43856797的博客
11-02 1789
前言 html中制作几何图形的方法有很多，canvas，SVG等等。 我们可以运用css的border样式来制作一些常见的几何图形，相对于canvas来说只使用css就能实现，相对于SVG来说便于理解，上手容易。 常见的几何图形总体可以分为两种，一种是有棱角的（多边形）和边为弧线的（圆），稍微复杂一点的类型像星星之类的也可以理解为是这两种类型的拼接而成的。 三角形-border css制作三角形其...
前端面试-CSS
wanglu458512的博客
09-19 2980
一、CSS基础 CSS选择器及其优先级 对于选择器的优先级： 标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高； 如果优先级相同，则最后出现的样式生效； 继承得到的样式的优先级最低； 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ； 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用
前端学习笔记 - HTML+CSS
fengxm0309的博客
10-07 4727
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则，使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 什么是 HTML HTML 指的是超文本标记语言 (Hyper Text Markup Lang
CSS样式命名的重要性
10-25
此外，这样的做法也有助于新成员更快地上手项目。 4. **跨语言兼容性**：某些命名方式（如采用短横线`-`连接单词）在JavaScript中可以直接作为属性名使用，这为使用CSS选择器编写脚本提供了便利。例如，`.message-...
html+css+js基础问答
qq_43751465的博客
08-26 5215
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
前端开发_HTML5_盒子模型
u013185175的博客
12-16 4782
盒子模型 1、引入 盒子模型是CSS中一个重要的概念，早在CSS的诞生之处便有这一个概念了，对于网页中的大部分对象，实际呈现就是一个盒子形状对象，即是一个块对象，每一个盒子都存在着四个东西，即:边框(border)、边界(margin)、填充(padding)、内容(content)。这四个内容我们在之前的学习中是介绍过的。那么在学习的过程中我们还举例了现实生活中的快递盒子便于大家的理解。 2、盒子模型示意图 3、盒子的大小确定 我们在html页面上写一个标签元素，发现这一个这一个...
html 盒子
NNNNNNI的博客
09-12 1428
盒子
html - 盒子模型
热门推荐
CSDNzhaojiale的博客
02-06 1万+
什么是盒子模型 CSS 中 HTML 页面中的每一个元素都是一个盒子或者说是被一个盒子所包围着 盒子模型的组成部分 内容区（content）：用来在 HTML 页面显示内容的区域，可以是文本内容、图片、视频或者其他后代元素等。 内边距（padding）：指的是内容区至边框之间的空白区域。 边框（border）：包含内容区和内边距的边界。 外边距（margin）：指的是当前盒子...
盒子模型代码_css盒模型
weixin_39900676的博客
11-29 795
目录普通盒模型一个盒子模型包括以下东西怪异盒模型ie6兼容性问题什么是css hack盒子高度不能低于默认字体高度普通盒模型CSS 盒子模型(Box Model)，所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间...
HTML---盒子模型
zhoutong2323的博客
12-20 1129
盒子模型。
HTML----盒子模型
xry12354的博客
04-08 2977
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
html盒子模型
m4587的博客
07-18 2680
根据W3C的规范，元素内容占据的空间是由width/height属性设置的，而内容周围的padding和border值是另外计算的；在HTML文档中每个元素都被处理成一个矩形“盒子”，并且这个盒子由4部分构成，分别是content（内容区域）、padding（内边距）、border（边框）、margin（外边距）。4、外边距，相邻盒子间的空白区域，通过margin进行设置，可分别设置4个方向的外边距。3、边框，元素边框，通过border进行设置，可分别设置4个边框。即在怪异模式下的盒模型，...
html5盒子模型作业,HTML5盒子模型。
weixin_34526152的博客
06-05 2034
盒子模型。盒子由 margin、border、padding、content 四部分组成。margin ：外边距border：边框padding：内边距 (内容与边框的距离)content：内容* {margin: 0;padding: 0;}div {/*设置背景颜色*/background-color: blue;/*设置宽高*/width: 250px;height: 250px;/*设置外...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值