CSS画心形的三种方法,超级简单(一)

简介: CSS画心形的三种方法,超级简单

一、一颗div一颗心

用一个div画出一个心,核心的方法就是使用伪元素

首先,我们在页面上先写出一个div

使用CSS,将这个div变为一个橘红色的正方形:

接着我们利用元素的两个伪元素:before和:after,画出一个蓝色的圆和一个黄色的圆,并且将它们的圆心分别定位在正方形的上边和右边。

再来,将刚刚实现的两个圆变成和正方形一样的颜色

最后,将元素div旋转45度,我们要的心形就实现了!就是这么简单


CSS画心形的三种方法,超级简单(二)https://developer.aliyun.com/article/1385357

相关文章
|
12天前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
9 1
|
7天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
12 0
|
29天前
|
前端开发 容器
css溢出隐藏的五种方法
css溢出隐藏的五种方法
19 1
|
1月前
|
前端开发 容器
css溢出隐藏的五种方法
css溢出隐藏的五种方法
|
2月前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
70 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
2月前
|
前端开发
css 实用技巧 —— div在div中水平垂直居中(两种方法)
css 实用技巧 —— div在div中水平垂直居中(两种方法)
41 3
|
2月前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
90 2
|
2月前
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
1016 1
|
2月前
|
前端开发
你不知道的css——2. 百分比高度失效,绝对定位和非绝对定位元素的宽高百分比计算方法的不同
你不知道的css——2. 百分比高度失效,绝对定位和非绝对定位元素的宽高百分比计算方法的不同
38 1
|
2月前
|
前端开发
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
css动画 —— 自定义不规则的动画路径 offset-path (含不规则的动画路径参数获取方法)
57 1