AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

用CSS画图——从三角形到吃豆人

2024-04-28 45
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 用CSS画图——从三角形到吃豆人

今天在搬砖的时候看到设计稿上有一个三角形的矢量箭头设计师没有给，就想着去问设计师要一下。这时候旁边的大佬说：“不就一个三角形么还要问设计师拿？来来来我几行代码给你写出来····”

从三角形开始

这貌似是一个老生常谈的话题了，之前的面经上偶尔还会出现这道问题，不知道现在的面试还会不会问这个。主要是利用CSS的border-raduis这个属性，我们先来看看下面这个例子

<style>
    .box1 {
        width: 0px;
        height: 0px;
        border: 50px solid;
        border-left-color: blue;
        border-right-color: yellow;
        border-bottom-color: green;
        border-top-color: red;
    }
</style>
<div class="box1"></div>

17.png


在浏览器上渲染出来是这个样子的，图中的4个等腰直角三角形的直角边长是50px，斜边长是100px。容易想到的是，我们只要把其中任意三个三角形隐藏掉，就可以得到一个等腰直角三角形。比如我希望得到一个直角向下的三角形，可以加上以下几行。得到一个三角形之后，再加上transform: rotate(?deg)旋转属性就可以得到任意方向的三角形。

.box1{
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: red;
}

18.png

在现代工程项目中还可以利用less/sass等预处理语言的能力封装起来，颜色，方向作为参数，这里就不再赘述了。

气泡框

现在有了三角形之后，我们就可以来做一个聊天消息中常见的气泡框。将三角形跟一个矩形结合起来即可。

<style>
    .box {
        width: 200px;
        height: 100px;
        position: relative;
        background: red;
        border-radius: 10px;
    }

    .box::before {
        content: '';
        width: 0px;
        height: 0px;
        border: 20px solid;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-top-color: red;
        position: absolute;
        top: 100%;
        left: 50%;
    }
</style>
<div class="box"></div>

19.png

镂空三角形

如果想实现一个镂空的三角形，最容易想到的方法应该是将两个三角形叠加起来，用一个去遮住另一个。

<style>
    .box {
        width: 200px;
        height: 200px;
        position: relative;
    }

    .box::before {
        content: '';
        width: 0px;
        height: 0px;
        border: 20px solid;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-top-color: red;
        position: absolute;
    }

    .box::after {
        content: '';
        width: 0px;
        height: 0px;
        border: 20px solid;
        border-left-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-top-color: white;
        top: -2px;
        position: absolute;
    }
</style>
<div class="box"></div>

21.png

五角星

五角星的是利用三个三角形旋转叠加而成

.box {
    position: relative;
    width: 0px;
    height: 0px;
    border-left: transparent 20px solid;
    border-right: transparent 20px solid;
    border-bottom: transparent 20px solid;
    border-top: red 15px solid;
}

.box::before {
    content: '';
    width: 0px;
    height: 0px;
    border-left: transparent 20px solid;
    border-right: transparent 20px solid;
    border-bottom: transparent 20px solid;
    border-top: red 15px solid;
    position: absolute;
    top: -23px;
    left: -10px;
    transform: rotate(286deg);

}

.box::after {
    content: '';
    width: 0px;
    height: 0px;
    border-left: transparent 20px solid;
    border-right: transparent 20px solid;
    border-bottom: transparent 20px solid;
    border-top: red 15px solid;
    position: absolute;
    top: -22px;
    left: -31px;
    transform: rotate(71deg);
}

22.png

六角星

六角星就是两个三角形叠起来即可

.box {
    position: relative;

}

.box::before {
    content: '';
    width: 0px;
    height: 0px;
    border-left: transparent 30px solid;
    border-right: transparent 30px solid;
    border-bottom: transparent 52px solid;
    border-top: red 52px solid;
    position: absolute;


}

.box::after {
    content: '';
    width: 0px;
    height: 0px;
    border-left: transparent 30px solid;
    border-right: transparent 30px solid;
    border-bottom: transparent 52px solid;
    border-top: red 52px solid;
    position: absolute;
    transform: rotate(180deg);
    top: -36px;
}
<div class="box"></div>


23.png

这个是我面试字节的时候被问到过的一个题目，原问题大概是画一个等腰梯形，上底是10px，下底是20px，高是5px。

我们在上面画三角形的时候把盒子的宽高都设置成了0，这次我们把盒子宽高设置一下试试会发生什么效果。

<style>
    .box {
        width: 10px;
        height: 10px;
        border: 5px solid;
        border-left-color: black;
        border-right-color: green;
        border-bottom-color: blue;
        border-top-color: red;
    }
</style>
<div class="box"></div>

24.png

从图中我们可以很容易得知只要把其他三条边框变成透明，就可以得到面试题的答案。 25.png

六边形

在拥有了一个梯形之后，六边形便是两个梯形叠在一起

.box {
    width: 10px;
    height: 10px;
    border: 5px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: red;
    position: relative;
}

.box::after {
    content: '';
    width: 10px;
    height: 10px;
    border: 5px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: red;
    border-top-color: transparent;
    position: absolute;
    left: -50%;
    top: -250%;
}

26.png

八边形

同样的，八边形就是两个梯形叠加一个矩形

.box {
    width: 20px;
    height: 10px;
    background: red;
    position: relative;
}

.box::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 5px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: red;
    border-top-color: transparent;
    position: absolute;
    top: 100%;
    transform: rotate(180deg);
}

.box::after {
    content: '';
    width: 10px;
    height: 10px;
    border: 5px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: red;
    border-top-color: transparent;
    position: absolute;
    top: -200%;
}

27.png

我们可以在上述代码中加上border-radius属性，就可以得到一个90度的扇形；两个扇形叠加再一起可以得到一个圆环。

<style>
    .box {
        width: 0;
        height: 0;
        border: 50px solid;
        border-radius: 100%;
        border-left-color: black;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-top-color: transparent;
    }

    .circle::after {
        content: '';
        width: 0;
        height: 0;
        border: 45px solid;
        border-radius: 100%;
        border-left-color: green;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-top-color: transparent;
    }
</style>
<div class="box"></div>
<div class="box circle"></div>

29.png

心形

心形是两个半圆叠加一个菱形，可以参考如下代码

<style>
.box {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    transform: rotate(45deg);
}

.box::before {
    content: '';
    width: 0;
    height: 0;
    border: 50px solid;
    border-radius: 100%;
    border-left-color: red;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-top-color: red;
    position: absolute;
    left: -50px;
    transform: rotate(-45deg);
}

.box::after {
    content: '';
    width: 0;
    height: 0;
    border: 50px solid;
    border-radius: 100%;
    border-left-color: transparent;
    border-right-color: red;
    border-bottom-color: red;
    border-top-color: transparent;
    position: absolute;
    top: -50px;
    transform: rotate(-135deg);
}
</style>

29.png

吃豆人

吃豆人则是隐藏掉1/4圆即可

.box {
    width: 0;
    height: 0;
    border: 50px solid;
    border-radius: 100%;
    border-left-color: red;
    border-right-color: transparent;
    border-bottom-color: red;
    border-top-color: red;
    position: relative;
}

31.png

linear-gradient()  函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。

一句话：沿着一条线进行渐变

在了解这个属性之后，最让我觉得神奇的不是它可以实现很花的效果，而是我们可以利用它做“循环”。这个循环打了引号，或许叫做重复比较合适。下面我们就用这个属性来实现一个网格效果。

.box {
    background-image: linear-gradient(to right, #000 1px, transparent 1px),
        linear-gradient(to bottom, #000 1px, transparent 1px);
    background-size: 10px 10px;
    background-repeat: repeat;
    width: 500px;
    height: 500px;
}

linear-gradient(to right, #000 1px, transparent 1px) 产生一条竖直的线，配合background-size和background-repeat就可以实现“循环”（当然你也可以使用repeat-linear-gradient），进而实现上述的表格效果。

32.png

除此之外，竖直方向上的渐变让我们十分容易地去构造一个柱状图。具体代码如下：

.container {
    display: flex;
}

.container div {
    width: 40px;
    height: 200px;
    margin: 20px;
}

.box1 {
    background-image: linear-gradient(to bottom, transparent 40px, red 40px)
}

.box2 {
    background-image: linear-gradient(to bottom, transparent 80px, red 80px)
}

.box3 {
    background-image: linear-gradient(to bottom, transparent 120px, red 120px)
}

<div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

33.png 

.box {
    position: relative;
    width: 100px;
    height: 200px;
    overflow: hidden;
}

.box::before {
    content: '';
    border: 100px solid;
    border-radius: 100%;
    border-left-color: transparent;
    border-right-color: red;
    border-top-color: red;
    border-bottom-color: transparent;
    position: absolute;
    transform: rotate(45deg);
    left: -100%;
}
<div class="box"></div>

上面我们利用border实现了一个十分局限的扇形，现在我们尝试去画一个任意角度的扇形。

0-180°扇形

主要的思路是用一个半圆配合盒子的overflow:hidden属性，来实现一个0-180°的扇形 34.png

由上图可以看到，盒子与伪元素已经完全贴合，那只要这个时候伪元素再进行旋转，就会被盒子的overflow:hidden属性挡掉。

35.png

180-360°扇形

主要的思路是利用两个半圆，通过旋转叠加来实现。

.box {
    position: relative;
}

.box::before {
    content: '';
    border: 100px solid;
    border-radius: 100%;
    border-left-color: transparent;
    border-right-color: red;
    border-top-color: red;
    border-bottom-color: transparent;
    position: absolute;
    transform: rotate(45deg);
}

.box::after {
    content: '';
    border: 100px solid;
    border-radius: 100%;
    border-left-color: red;
    border-right-color: transparent;
    border-top-color: transparent;
    border-bottom-color: red;
    position: absolute;
    transform: rotate(45deg);
}
<div class="box"></div>

好了，通过上述代码我们成功画出了一个圆形（好像有什么地方不对，为什么画一个圆形要这么多代码）

36.png


但是，只要我们将任意一个半圆的旋转角度改变，就可以得到任意的180-360°的扇形。 37.png


现在我们已经有了0-360°的扇形，讲道理可以利用这些扇形叠加来叠加去来画出一个扇形。但其实不用这么麻烦，CSS中有一个属性叫做圆锥渐变:conic-gradient()。使用它来画一个饼图代码如下：

.box {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(red 60deg, blue 60deg 130deg, black 130deg 200deg, yellow 200deg);
}

38.png

此外，任意角度的扇形也是信手拈来

.box {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: conic-gradient(red 37deg, transparent 37deg);
}

41.png



上面我们实现了一个张着嘴巴不会动的吃豆人，也没有豆子吃。现在我们把这两件事情来补上。

动起来

先来实现一个会动的吃豆人，主要的思路还是用两个半圆，每个半圆旋转45°，这样就可以画出一个90°的口子，再加上动画，让这个口子张开闭合。

.box {
    transform: rotate(90deg);
    width: 200px;
    height: 200px;
    position: relative;
}

.left {
    content: '';
    border: 100px solid;
    border-radius: 100%;
    border-left-color: transparent;
    border-right-color: red;
    border-top-color: red;
    border-bottom-color: transparent;
    position: absolute;
    transform: rotate(90deg);
    animation: left .5s linear infinite ;
}

.right {
    content: '';
    border: 100px solid;
    border-radius: 100%;
    border-left-color: red;
    border-right-color: transparent;
    border-top-color: transparent;
    border-bottom-color: red;
    position: absolute;
    transform: rotate(0deg);
    animation: right .5s linear infinite ;

}

@keyframes left {
    0% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(45deg);
    }

    100% {
        transform: rotate(90deg);
    }
}

@keyframes right {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(45deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

42.png 链接


吃豆子

好的，帅气的大嘴已经动了起来。现在我想提一个问题，如果让你不用JavaScript，只给你一个dom元素和CSS，让你画N个正方形，你会怎么做呢？

片刻的思索过后，你可以会想起上面我提过渐变可以用来做“循环”。是的，我这里使用到了径向渐变来实现上面的需求，别忘了配合background-repeat，当然，你也可以使用repeat-radial-gradient。 渐变除了兼容性不好没什么缺点（手动狗头）

radial-gradient() CSS函数创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成。它的形状可以是圆形（circle）或椭圆形（ellipse）。这个方法得到的是一个CSS<gradient>数据类型的对象，其是 <image> 的一种。

.bean {
    width: 100px;
    height: 20px;
    background-repeat: repeat-x;
    background-size: 20px 20px;
    background-image: radial-gradient(circle at center, red 4px, #fff 4px 20px);
}
<div class="bean">

43.png

现在我们如法炮制地加上动画，让豆子动起来

.bean {
    width: 100px;
    height: 20px;
    background-repeat: repeat-x;
    background-size: 20px 20px;
    background-image: radial-gradient(circle at center, red 4px, transparent 4px 20px);
    overflow: hidden;
    position: relative;
    animation: bean 1s linear infinite;
}

@keyframes bean {
    0% {
        left: 0px;
    }

    100% {
        left: -100px;
    }
}
<div class="bean"></div>

44.png 链接

剩下的就只要让豆子冲向吃豆人的嘴巴就好了~

45.png 链接



CSS 还是可以用来画一些简单的图形的，不过在工程上该找设计师还是找设计师吧，毕竟各个属性在各种浏览器的兼容性还是不太一样的。最让你印象深刻的CSS属性是什么呢？



文章标签：
前端开发
JavaScript
关键词：
CSS三角形
CSS吃豆
可乐鸡翅kele
目录
相关文章
远近高低各不同
|
7月前
|
前端开发
CSS画三角形(三种方法)
CSS画三角形(三种方法)
远近高低各不同
66 0
你都不懂
|
7月前
|
前端开发
css实现伪类三角形气泡框 带边框
css实现伪类三角形气泡框 带边框
你都不懂
65 3
jcLee95
|
7月前
|
前端开发
玩转CSS盒子之 三角形盒子
玩转CSS盒子之 三角形盒子
jcLee95
65 0
祈澈菇凉
|
前端开发
如何用CSS 画一个三角形？
如何用CSS 画一个三角形？
祈澈菇凉
74 0
神明木佑
|
2月前
|
前端开发
如何使用css写三角形
如何使用css写三角形
神明木佑
31 4
html的七十二变
|
2月前
|
前端开发
用纯 CSS 创建一个三角形
使用纯 CSS 可以通过边框技巧创建三角形。例如，要创建一个指向下方的等边三角形，可以将 `width` 和 `height` 设为 `0`，并通过透明的左右边框和有颜色的底边来形成三角形。
html的七十二变
21 3
gudanhero2018
|
3月前
|
前端开发
CSS制作小三角形
CSS制作小三角形
gudanhero2018
19 1
派大鑫的工作室
|
2月前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
派大鑫的工作室
26 0
刘志辉~
|
4月前
|
前端开发
如何使用css写三角形
如何使用css写三角形
刘志辉~
38 1
朝阳39
|
5月前
|
前端开发
css 实用技巧 —— 使用border属性绘图（三角形、梯形、对话框尖角）
css 实用技巧 —— 使用border属性绘图（三角形、梯形、对话框尖角）
朝阳39
89 1

热门文章

最新文章

  • 1
    CSS3中的选择器
  • 2
    脑洞大开：如何使用CSS实现自定义圆角虚线框
  • 3
    CSS伪元素实现的3D按钮
  • 4
    webpack window 使用sass来编译css样式
  • 5
    CSS3的新属性的一下总结
  • 6
    css属性列表 和 属性值含义
  • 7
    CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
  • 8
    符合WEB标准的下拉导航菜单（CSS菜单）演示
  • 9
    IE6, IE7, IE8 CSS 兼容速查表
  • 10
    一款非常棒的纯CSS3 3D菜单演示及制作教程
  • 1
    深入理解css中的link 和 @import
    110
  • 2
    CSS Flex布局实战案例：构建响应式卡片组件
    127
  • 3
    学习css的clip-path属性
    97
  • 4
    什么是CSS Sprite
    50
  • 5
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    86
  • 6
    技术心得：xpath、CSS定位方法
    56
  • 7
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    193
  • 8
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    128
  • 9
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    148
  • 10
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    102

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    阿里云对象存储OSS收费标准：存储、流量和请求等多个计费项详解