专业汉语词典知识平台,分享汉字词语知识、历史文学知识解答!

励北网
励北网

css三角形怎么画,css画三角形的3种方法【图文教程】

来源:小易整编  作者:小易  发布时间:2022-12-28 01:58
摘要:css三角形怎么画,css画三角形的3种方法。在工作中常常遇到需要绘制三角形的需求,但css实现绘制三角形的方式有很多种,你知道有哪些方式可以绘制三角形呢?小编一共总结了三种方式实现绘制基本的三角形。使用边框的方式采用渐变的方式实现使用cl...

css三角形怎么画,css画三角形的3种方法。在工作中常常遇到需要绘制三角形的需求,但css实现绘制三角形的方式有很多种,你知道有哪些方式可以绘制三角形呢?

小编一共总结了三种方式实现绘制基本的三角形。

  1. 使用边框的方式

  2. 采用渐变的方式实现

  3. 使用clip-path

首先我们要准备一个容器

<div class="container"></div>

1. 使用边框(border)绘制三角形

使用css中的border属性可以快速实现绘制一个三角形。

首先我们要将该容器的width和height都设置为0,这样容器的四条边border设置任意值都会相交,可以利用交点来绘制三角形。

.container {  width: 0;  height: 0;  border: 100px solid;  border-color: orangered skyblue gold yellowgreen; }

css三角形怎么画,css画三角形的3种方法

通过设置容器的宽高为0,给边框(border)设置宽度,实现了4个三角形形状。因此我们可以根据border这个特性来绘制三角形,在绘制时,可以将不用的边框设置添加transparent。

实现指向下方的三角形,可以让 border 的上边可见,其他边都设置为透明(transparent):

.container {
  width: 0;
  height: 0;
  border-top: 100px solid pink;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
}

css三角形怎么画,css画三角形的3种方法

上面的代码还可以这样写:

.container {  width: 0;  height: 0;  border-style: solid;  border-color: transparent;  border-width: 100px;  border-top-color: pink; }

实现指向上方的也是类似,将下方的border设置为可见:

.container {
  width: 0;
  height: 0;
  border-bottom: 100px solid pink;
  border-right: 100px solid transparent;
  border-left: 100px solid transparent;
}

css三角形怎么画,css画三角形的3种方法

我们可以通过调整不同方向边框的值,实现不同指向的三角形

css三角形怎么画,css画三角形的3种方法

.container {  width: 0;  height: 0;  border: 100px solid transparent;  border-right: 100px solid pink; }

实现等边三角形:

css三角形怎么画,css画三角形的3种方法

.container {  width: 0;  height: 0;  border-left: 69px solid transparent;  border-right: 69px solid transparent;  border-bottom: 120px solid pink; }

实现其它不同形状的三角形(可自行探索),如

css三角形怎么画,css画三角形的3种方法

.container {  width: 0;  height: 0;  border-left: 69px solid transparent;  border-right: 190px solid transparent;  border-bottom: 60px solid pink; }

总结:使用border实现绘制三角形,需要注意的点有:

(1)容器的宽高需设置为0

(2)需要设置容器各个方向边框的值,使用到的边框赋予颜色,没使用到的边框设置为透明(transparent)

2. 使用渐变(linear-gradient)

linear-gradient 需要结合 background-image 来实现绘制三角形,下面就来逐步使用渐变实现绘制一个三角形。

首先,我们先绘制一个矩形:

.container {
  width: 150px;
  height: 180px;
  background-repeat: no-repeat;
  outline: 2px solid red;
}

css三角形怎么画,css画三角形的3种方法

接下来给容器添加一个渐变

.container {  width: 150px;  height: 180px;  background-repeat: no-repeat;  outline: 2px solid red;  background-image: linear-gradient(45deg, pink 50%, rgba(255, 255, 255, 0) 50%); }

css三角形怎么画,css画三角形的3种方法

根图形需要调整 background-size 和 background-position的值,同时也需要调整角度,使三角形的顶边是从左上角开始,直到右侧的中间。

.container {  width: 150px;  height: 190px;  background-repeat: no-repeat;  outline: 2px solid red;  background-image: linear-gradient(32deg, pink 50%, rgba(255, 255, 255, 0) 50%);  background-size: 100% 50%;  background-position: top left; }

css三角形怎么画,css画三角形的3种方法

到这里已经基本实现一个三角形了,但还不是我们想要的效果,我们还可以添加渐变绘制一个三角形

.container {  width: 150px;  height: 190px;  background-repeat: no-repeat;  outline: 2px solid red;  background-image: linear-gradient(32deg, pink 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(148deg, pink 50%, rgba(255, 255, 255, 0) 50%);  background-size: 100% 50%;  background-position: top left; }

css三角形怎么画,css画三角形的3种方法

最后调整这两个三角形的位置即可,这里使用 background-position 属性来调整,同时去掉边线,则能够达到我们想要的效果了

.container {  width: 150px;  height: 190px;  background-repeat: no-repeat;  background-image: linear-gradient(32deg, pink 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(148deg, pink 50%, rgba(255, 255, 255, 0) 50%);  background-size: 100% 50%;  background-position: top left, bottom left; }

css三角形怎么画,css画三角形的3种方法

总结:

使用渐变绘制三角形,需要给容器设置宽高,同时进行调试出合适的渐变角度,相对于border来说可能会麻烦一些。

3. 使用 clip-path 绘制三角形

使用clip-path,需要注意目前其在浏览器兼容性不是很好,使用时要考虑浏览器是否支持。

使用clip-path 可以绘制多边形(或圆形、椭圆形等),并将其定位在元素内。实际上,浏览器不会绘制 clip-path 之外的任何区域,因此我们看到的是 clip-path 的边界。

首先,在容器中绘制一个带背景颜色的矩形:

.container{
  width: 150px;
  height: 150px;
  background-color: pink;
}

css三角形怎么画,css画三角形的3种方法

下面来绘制一个指向下方的三角形:

.container{
  width: 150px;
  height: 150px;
  background-color: pink;
  clip-path: polygon(0 0, 50% 50%, 100% 0);
}

css三角形怎么画,css画三角形的3种方法

clip-path属性值为什么要这样设置呢?使用 clip-path 可以为沿路径放置的每个点定义坐标,最后首尾相连形成封闭图形。

上面的情况,就定义了三个点:top-left (0 0)、bottom-left (50% 50%)、right-center (100% 0),三个点首尾相连则形成了一个三角形。

总结:

使用 clip-path 只需要在容器中绘制背景颜色,给容器设置宽高,同时设置点的位置;这种方式的代码较少,但需要考虑浏览器的兼容性问题。

以上就是使用纯css绘制三角形的三种方式,你还知道哪些使用纯 CSS 实现绘制三角形的方法?


本文地址:百科问答频道 https://www.neebe.cn/wenda/886417.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


百科问答
小编:小易整编
相关文章相关阅读
  • css布局技巧,css常见布局汇总

    css布局技巧,css常见布局汇总

    css布局技巧,css常见布局汇总要点速看网页开发基本思路:确定版心--》分析行模块--》分析列模块;如果一行当中有多个模块,一定要放在同一个父模块中;列模块首先可以先给宽高背景颜色,实例化盒子;常见布局:两栏/三栏/等高/粘带推荐flex...

  • css选择器有哪些,css选择器怎么用

    css选择器有哪些,css选择器怎么用

    css选择器有哪些,css选择器怎么用 CSS选择器又被称为CSS样式属性、CSS属性选择器,CSS中的“选择器”指明了“{}”中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素;常用选择器可分为标签名选择器、类选择器、id选择器...

  • CSS图片透明度怎么设置,CSS 透明度设置方法

    CSS图片透明度怎么设置,CSS 透明度设置方法

    CSS图片透明度怎么设置,CSS透明度设置方法怎样在CSS样式中设置背景的透明度怎样在CSS样式中设置背景的透明度,下面给出一个具体的实例。把类为box的层设为透明。 透明度设置 html...

  • css教程,0基础入门css教程

    css教程,0基础入门css教程

    通过使用CSS我们可以大大提升网页开发的工作效率!在我们的CSS教程中,您会学到如何使用CSS同时控制多重网页的样式和布局。1.CSS简介CSS是一种定义样式结构如字体、颜色、位置等的语言,被用于描述网页上的信息格式化和显示的方式。CSS样...

  • csshover怎么用,csshover用法教程

    csshover怎么用,csshover用法教程

    csshover怎么用,csshover用法教程1.实现效果在这里插入图片描述2.实现步骤定义一个宽高为300px的父容器.box{position:relative;width:300px;height:300px;}父容器中添加...

  • css样式表有哪几种,css样式表介绍

    css样式表有哪几种,css样式表介绍

    css样式表有哪几种,css样式表介绍层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰...

  • css3渐变属性,css3渐变教程

    css3渐变属性,css3渐变教程

    css3渐变属性,css3渐变教程好程序员web前端教程之CSS3渐变,CSS3渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果,现在通过使用CSS3的渐变(gradients)即...

  • 如何设置滚动条样式,CSS设置自定义滚动条样式

    如何设置滚动条样式,CSS设置自定义滚动条样式

    如何设置滚动条样式,CSS设置自定义滚动条样式你见过自定义滚动条样式的网站吗?是不是很想知道它们是怎么实现的?读完这篇文章,你会了解到使用CSS自定义滚动条样式的所有知识。在本教程中,你将:-学习能用来自定义滚动条样式的原生CSS属性-使用...

  • 周排行
  • 月排行
  • 年排行

精彩推荐