CSS图形每日一练（上）

最新推荐文章于 2024-03-06 14:42:16 发布
最新推荐文章于 2024-03-06 14:42:16 发布
阅读量127 收藏
点赞数
原文链接：https://juejin.im/post/5cad4a475188251ae64a6d7d
版权

前言

本文将持续更新CSS图形练习，同步上传 GitHub 。

1. 正方形（Square）

#square {
  width: 100px;
  height: 100px;
  background: red;
}
复制代码

2. 矩形（Rectangle）

#rectangle {
  width: 200px;
  height: 100px;
  background: red;
}
复制代码

3. 圆形（Circle）

#circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%;
}
复制代码

4. 椭圆形（Oval）

#oval {
  width: 200px;
  height: 100px;
  background: red;
  border-radius: 100px / 50px;
}
复制代码

5. 上三角形（Triangle Up）

#triangle-up {
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
复制代码

6. 下三角形（Triangle Down）

#triagnle-down {
  width: 0px;
  height: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid red;
}
复制代码

7. 左三角形（Triangle Left）

#triangle-left {
  width: 0px;
  height: 0px;
  border-right: 100px solid red;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
}
复制代码

8. 右三角形（Triangle Right）

#triangle-right {
  width: 0px;
  height: 0px;
  border-left: 100px solid red;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
}
复制代码

9. 左上三角（Triangle Top Left）

#triangle-topleft {
  width: 0px;
  height: 0px;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}
复制代码

10. 右上三角（Triangle Top Right）

#triangle-topright {
  width: 0px;
  height: 0px;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
}
复制代码

11. 左下三角（Triangle Bottom Left）

#triangle-bottomleft {
  width: 0px;
  height: 0px;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;
}
复制代码

12. 右下三角（Triangle Bottom Right）

#triangle-bottomright {
  width: 0px;
  height: 0px;
  border-bottom: 100px solid red;
  border-left: 100px solid transparent;
}
复制代码

13. 上半圆（Semicircle Top）

实现原理：把高度 height 设置为宽度 width 的一半，并且左上角和右上角的圆角半径与元素的高度一致，而右下角和左下角的圆角半径设置为 0。

#semicircle-top {
  width: 100px;
  height: 50px;
  background: red;
  border-radius: 100px 100px 0 0;
  /* 左上、右上、右下、左下 */
}
复制代码

14. 下半圆（Semicircle Bottom）

#semicircle-bottom {
  width: 100px;
  height: 50px;
  background: red;
  border-radius: 0 0 100px 100px;
  /* 左上、右上、右下、左下 */
}
复制代码

15. 左半圆（Semicircle Left）

#semicircle-left {
  width: 50px;
  height: 100px;
  background: red;
  border-radius: 50px 0 0 50px;
  /* 左上、右上、右下、左下 */
}
复制代码

16. 右半圆（Semicircle Right）

#semicircle-right {
  width: 50px;
  height: 100px;
  background: red;
  border-radius: 0 50px 50px 0;
  /* 左上、右上、右下、左下 */
}
复制代码

17. 扇形（Sector）

#sector {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 100px 0 0 0;
}
复制代码

18. 梯形（Trapezoid）

#trapezoid {
  width: 100px;
  height: 0;
  border-bottom: 100px solid red;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}
复制代码

19. 平行四边形（Parallelogram）

#parallelogram {
  width: 150px;
  height: 100px;
  background: red;
  transform: skew(20deg);
}
复制代码

20. Diamond Square

#diamond {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: red;
  position: relative;
  top: -50px;
}
#diamond::after {
  position: absolute;
  content: '';
  top: 50px;
  left: -50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: red;
}
复制代码

21. Diamond Shield

#diamond-shield {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 20px solid red;
  position: relative;
  top: -50px;
}
#diamond-shield::after {
  position: absolute;
  content: '';
  top: 20px;
  left: -50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid red;
}
复制代码

22. Diamond Narrow

#diamond-narrow {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 70px solid red;
  position: relative;
  top: -50px;
}
#diamond-narrow::after {
  position: absolute;
  content: '';
  top: 70px;
  left: -50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid red;
}
复制代码

23. Cut Diamond

#cut-diamond {
  border-style: solid;
  border-color: transparent transparent red transparent;
  border-width: 0 25px 25px 25px;
  width: 50px;
  height: 0;
  position: relative;
  box-sizing: content-box;
  margin: 20px 0 50px 0;
}
#cut-diamond::after {
  position: absolute;
  content: '';
  top: 25px;
  left: -25px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid red;
}
复制代码

24. 五边形（Pentagon）

#pentagon {
  position: relative;
  width: 54px;
  box-sizing: content-box;
  border-width: 50px 18px 0;
  border-style: solid;
  border-color: red transparent;
}
#pentagon::before {
  position: absolute;
  content: '';
  top: -85px;
  left: -18px;
  width: 0;
  height: 0;
  border-width: 0 45px 35px;
  border-style: solid;
  border-color: transparent transparent red;
}
复制代码

25. 六边形（Hexagon）

#hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
}
#hexagon::before {
  position: absolute;
  content: '';
  top: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 25px solid red;
}
#hexagon::after {
  position: absolute;
  content: '';
  bottom: -25px;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 25px solid red;
}
复制代码

26. 八边形（Octagon）

在Jsbin里coding时发现，盒模型将 border 的宽度加上了，无法显示应有的图形效果。随后加上 box-sizing: border-box;，就可以正常显示了。

#octagon {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
#octagon::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100px;
  height: 0;
  border-left: 29px solid white;
  border-right: 29px solid white;
  border-bottom: 29px solid red;
}
#octagon::after {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 100px;
  height: 0;
  border-left: 29px solid white;
  border-right: 29px solid white;
  border-top: 29px solid red;
}
复制代码

27. 弯尾箭头（Curved Tail Arrow）

#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
}
#curvedarrow::after {
  position: absolute;
  content: '';
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  border: 0px solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  transform: rotate(45deg);
}
复制代码

参考链接

转载于:https://juejin.im/post/5cad4a475188251ae64a6d7d

weixin_34067980
关注
50道 CSS 经典题
A-Select °
01-20 430
1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizing属性？ 用来控制元素的盒子模型的解析模式，默认为content-box context-box：W...
在张量运算中使用“Torch”
深度学习与计算机视觉
02-15 1244
讨论5种基本和最常用的张量运算深度学习使我们能够执行非常复杂的任务。为了有效地执行任务，我们需要一个灵活的工具。由于其简单性，Pytorch为我们提供了此选项。它使用GPU（图形处理单元）...
【每日一练】12—CSS 产品卡片动画效果的实现
web前端开发
06-22 430
写在前面在软件开发中，CSS真的是很特别的存在，严格意义上来讲，CSS并不是一门编程语言，表面上看，它好像很简单，其实，在大型的开发项目中，CSS有多复杂，只有写过的人才知道。记得有次，我跟一个安卓开发的同事聊天，他问我，你是怎么学会CSS的呀？有什么学习技巧吗？这CSS太复杂了。我说，其实也没有什么技巧，就是天天写，比起你写JAVA，这CSS还是容易很多。因为我觉得会写...
【每日一练】15—CSS实现好看的卡片效果
web前端开发
06-28 2891
写在前面最近，在做一个新项目，考虑用Tailwind CSS来实现UI效果，这个新出来的CSS框架，很多人说，它是一个用了会上瘾的框架，虽然出来时间不长，但是他的火爆程度，直接向bootstrap靠近，当然，好不好用，这个看每个人的主观感觉。如果你想学习新东西的话，可以去试试，我也是刚刚开始用，我一直觉得，框架这种东西就是锦上添花的，可以帮助我们提升工作效果，但并不一定适...
CSS3 Day1 练习
weixin_30457465的博客
12-15 54
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Css3第一天 练习</title> <style> .nb{ border: 1px solid #ccc; padding: 10px 0; } .r...
【每日一练】14—CSS 实现常见问答手风琴效果
web前端开发
06-26 195
写在前面今天我们练习的这个小项目，是我们在很多网页上经常用到的，它的主要使用场景就是在一些问答页面里，或者一些简单说明的文字页面上，虽然，这个页面可能对于很多人来讲，内容不重要，以致于这个内容基本都是放在页面比较隐蔽的地方，可能大家也不怎么注意。当然，这个内容重要与否，需要具体情况具体分析，没有统一标准，但是，这个练习还是非常实用的。好了，我们一起来看看今天案例练习的效果...
github上关于iOS的各种开源项目集合
livexiaopo
08-03 4535
UI 下拉刷新 EGOTableViewPullRefresh - 最早的下拉刷新控件。SVPullToRefresh - 下拉刷新控件。MJRefresh - 仅需一行代码就可以为UITableView或者CollectionView加上下拉刷新或者上拉刷新功能。可以自定义上下拉刷新的文字说明。具体使用看“使用方法”。 （国人写）XHRefreshControl -
栋的月结 | 第一回合（定期更新、动态、架构、云技术、算法、后端、前端、收听/收看、英文、书籍、影视、好歌、新奇）[含泪总结.. 憋泪分享！]
纽雪澳诺加海美德的博客
02-01 2225
开篇词 大家好！以下是我在 2020 年 1 月 1 日至 31 日的所见、所闻、所学和所悟。 现在，我把它们安利给你们。   定期更新 原创专栏： 栋的周评 一文搞定 Linux 管理员手册：既简单又深刻 官方授权： Baeldung Java 周评 符合官方许可： Spring 官方指南   动态 在我的《一文搞定》系列专栏里新增了： 《一文搞定 |...
DailyPractice
03-21
"DailyPractice"是一个看似简单的项目名称，通常在编程学习或者软件开发中，人们会用这样的命名来记录每日的练习或日常编码任务。由于没有具体的标签信息，我们可以从一般的角度出发，探讨在IT行业中进行日常实践...
a超链接锚点的设置和应用 三国演义
weixin_72303943的博客
06-24 1780
三国演义 a超链接锚点的设置和应用
前端每日一练：三栏布局，包括 Flex 布局、浮动布局、Grid 布局以及绝对定位布局。
最新发布
SAXX2的博客
03-06 465
在网页开发中，三栏布局是一种常见的结构，通常包括一个固定宽度的左侧栏、一个固定宽度的右侧栏以及一个自适应宽度的主要内容区域。本文将介绍使用不同的布局方式实现三栏布局，包括 Flex 布局、浮动布局、Grid 布局以及绝对定位布局。
【每日一练】105—CSS实现一款输入文本动画的效果
web前端开发
11-28 280
文| 杨小爱写在前面关于这个CSS实现的文本动画效果，我们在前面也分享过很多，今天这个是一个输入文本框样式的动画效果，它的最终效果如下：它的HTML代码很简单，主要是在CSS这块，具体的实现过程，大家可以看一下它的源码实现过程，具体源码如下：HTML代码：<!DOCTYPE html> <html> <head> <meta charset="UTF...
【每日一练】139—CSS实现一款产品卡
web前端开发
02-19 141
产品卡片的实现，我们在前面也分享过不少，今天我们再练习一个，这个自带评分系统的卡片效果，这样可以帮助客户在选购产品时，就能从评分中先做一轮筛选。现在，我们就一起来看一下今天练习的最终效果吧。最终效果如下：HTML代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
【每日一练】20—CSS实现文字动画效果
web前端开发
07-05 994
写在前面今天来到了我们的第20个小项目的练习，距离我们100个小项目的练习，我们已经完成了五分之一了，剩下的五分之四，我们一起加油练习。今天练习的这个小项目是一个CSS实现的文字动画效果，主要就是用在页面加载时的效果，现在，我们一起来看一下这个项目的最终效果：HTML代码：<!DOCTYPE html> <html> <head> ...
【每日一练】103—纯CSS实现的一款炫酷卡片效果
web前端开发
11-24 1142
作者 | 杨小爱写在前面我们经常会在各大平台看到很多产品的卡片效果，以及一些个人单页网站上的个人资料介绍时，也会用到各种卡片效果来展示信息，这种卡片式的设计，可以帮助我们分门别类的归类各种信息，让内容更加有条理。因此，今天，我们就来写一个卡片效果，它的最终效果如下：HTML代码：<!DOCTYPE html> <html> <head> <title&gt...
【每日一练】119——CSS实现渐变按钮效果
web前端开发
12-23 430
文 | 杨小爱写在前面【每日一练】从第120练开始，我们的【每日一练】栏目内容会做一些调整。因为有很多小伙伴反映，文章中的很多练习代码看不明白，因此，后面我们将以每天学习一个知识点为主，有简单通俗易懂的基础理论知识，然后通过写练习来进一步理解和掌握【每日一练】里的的知识点，我们尽量做到每日只分享一个知识点，不做大而全的内容，以点为主。我们初步考虑会从基础的三剑客HTML、CSS、JavaScrip...
【每日一练】19—CSS 实现撕纸的效果
web前端开发
07-04 410
写在前面今天我们来练习一个CSS实现的撕纸效果，这个效果，也会在一些设计网站上经常看到，但是这个用PS可以直接做成一张图片，但是，今天我们用CSS通过两张图片就实现了，这样做的好处，就是当我们替换图片时，不需要再通过PS来更改图片，可以直接替换产品图片即可，这样会方便很多。好了，我们一起来看一下今天练习的项目最终效果：HTML代码：<!doctype html&gt...
第二章： 第一课 内容处理-插入文字
weixin_30299539的博客
03-06 98
平时博客等经常会有文章摘要，将文字截断后直接使用省略号表示文章还没有结束，如下所示： 在人际关系中，良好的第一印象是非常重要的，人们愿意在彼此身上寻求信任与诚实，并期望在接下来的经历中重现和增强这些好感。同样的道理也体现在移动应用或互联网产品中。在打造良好的品牌信誉及其与终端用户之间持...... 在过去我们可以通过后端服务器程序截取或JS截取文字后加入省略号即可。现在，我们的CSS...
[B站的html&css每日一练]-001.视觉差异滚动条
weixin_46837674的博客
04-11 241
效果如下： 图片及源码： 链接:https://pan.baidu.com/s/1uzODeUf1Xfl9UbbFaY0V1w 提取码:o0rt HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值