FCC---Create a More Complex Shape Using CSS and HTML---一个粉色爱心
One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS.
But first, you need to understand the ::before
and ::after
pseudo-elements.
These pseudo-elements are used to add something before or after a selected element.
In the following example, a ::before
pseudo-element is used to add a rectangle to an element with the class heart
:
- .heart::before {
- content: "";
- background-color: yellow;
- border-radius: %;
- position: absolute;
- height: 50px;
- width: 70px;
- top: -50px;
- left: 5px;
- }
For the ::before
and ::after
pseudo-elements to function properly, they must have a defined content
property.
This property is usually used to add things like a photo or text to the selected element. When the ::before
and ::after
pseudo-elements are used to make shapes, the content
property is still required, but it's set to an empty string.
In the above example, the element with the class of heart
has a ::before
pseudo-element that produces a yellow rectangle with height
and width
of 50px and 70px, respectively.
This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the left
and 50px above the top
of the element.
练习题:
Transform the element on the screen to a heart. In the heart::after
selector, change the background-color
to pink and the border-radius
to 50%.
Next, target the element with the class heart
(just heart
) and fill in the transform
property. Use the rotate()
function with -45 degrees.
Finally, in the heart::before
selector, set its content
property to an empty string.
练习代码:
- <style>
- .heart {
- position: absolute;
- margin: auto;
- top: ;
- right: ;
- bottom: ;
- left: ;
- background-color: pink;
- height: 50px;
- width: 50px;
- transform: rotate(-45deg);
- }
- .heart::after {
- background-color: pink;
- content: "";
- border-radius: %;
- position: absolute;
- width: 50px;
- height: 50px;
- top: 0px;
- left: 25px;
- }
- .heart::before {
- content: "";
- background-color: pink;
- border-radius: %;
- position: absolute;
- width: 50px;
- height: 50px;
- top: -25px;
- left: 0px;
- }
- </style>
- <div class="heart"></div>
效果:
刚刚自己又抄写了一遍。
- 先做个粉色的方形
- 再做2个伪元素,调好边界半径,依次叠加出2个心型的圆屁股
FCC---Create a More Complex Shape Using CSS and HTML---一个粉色爱心的更多相关文章
- 怎样将多个CSS文件导入一个CSS文件中
问题: 在HTML中引入css的其中的两个方法: 导入式和链接式的目的都是将一个独立的css文件引入一个文件中,二者的区别不大,事实上,二者最大的区别在于链接式使用html的标记引入外部css文 ...
- 何使用CSS写出一个下拉菜单。
导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步 : 首页我们打开Subli ...
- 用HTML+CSS画出一个同心圆
参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...
- div+css 怎么让一个小div在另一个大div里面 垂直居中
div+css 怎么让一个小div在另一个大div里面 垂直居中 方法1: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .parent { width:800 ...
- Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法
Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法 网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...
- 用css做出来一个三角形
用css做出来一个三角形 <!--不设置宽高 转换行内块 边线设置成宽度--> <div class="triangle"> 三角 ...
- No.6 - 利用 CSS animation 制作一个炫酷的 Slider
*{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...
- 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider
前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...
- HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表(目录)
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...
随机推荐
- #w29 2019年大前端技术周刊
本周是2019年第29周 移动端 移动开发十周年总结 相对于持续几百年工业革命,移动互联网的发展是短暂的.在这十几年的发展中,为了满足开源和节流的涌现出很多技术.接下来我们将会以开发方式的演进.基建与 ...
- Kubernetes的Job对象
Deployment.StatefulSet及DaemonSet三个主要用来进行长时间业务,不会退出. 而有一些离线业务,或者叫Batch Job(计算业务),计算完成后就直接退出 了,如果用Depl ...
- [JVM 相关] Java 新型垃圾回收器(Garbage First,G1)
回顾传统垃圾回收器 HotSpot 垃圾收集器实现 Serial Collector(串型收集器) 使用场景,大多数服务器是单核CPU. 适用收集场景:1. 新生代收集(Young Generatio ...
- [WPF 自定义控件]开始一个自定义控件库项目
1. 目标 我实现了一个自定义控件库,并且打算用这个控件库作例子写一些博客.这个控件库主要目标是用于教学,希望通过这些博客初学者可以学会为自己或公司创建自定义控件,并且对WPF有更深入的了解. 控件库 ...
- Linux介绍以及VMware和Centos的安装
一. Linux介绍 1 Linux诞生的故事 Unix篇: 为了进一步强化大型主机的功能,让主机的资源可以提供更多的使用者来利用,所以在1964年, 由AT&A公司的贝尔实验室(Bell). ...
- 【C#】学习笔记 abstract、virtual、interface使用的一些栗子
上
- 网络编程~~~C/S B/S 架构
C: client 客户端 B: browse 浏览器 S: server 服务器端 C/S架构: 基于客户端与服务端之间的通信 优点: 个性化设置, 响应速度快 缺点: 开发成本和维护成本高, 占用 ...
- Python安装常见问题(1):zipimport.ZipImportError: can't decompress data(此问题不解决pip安装不成功)
在CentOS以及其他的Linux系统中遇到安装包安装错误的原因,大多数都是因为缺少依赖包导致的,所以对于错误:zipimport.ZipImportError: can’t decompress d ...
- coredump配置、产生、分析以及分析示例
关键词:coredump.core_pattern.coredump_filter等等. 应用程序在运行过程中由于各种异常或者bug导致退出,在满足一定条件下产生一个core文件. 通常core文件包 ...
- vscode 问题。。。。
"program": "${workspaceFolder}/a.out", "preLaunchTask": "build&qu ...