CSS实现图形效果
CSS实现图形效果
CSS实现正方形、长方形、圆形、半圆、椭圆、三角形、平行四边形、菱形、梯形、六角星、五角星、心形、消息框。
正方形
<section>
<div id="square"></div>
</section>
<style type="text/css">
#square{
width: 100px;
height: 100px;
background: #4C98F7;
}
</style>
长方形
<section>
<div id="rectangle"></div>
</section>
<style type="text/css">
#rectangle{
width: 200px;
height: 100px;
background: #4C98F7;
}
</style>
圆形
<section>
<div id="circle"></div>
</section>
<style type="text/css">
#circle{
width: 100px;
height: 100px;
background: #4C98F7;
border-radius: 50%;
}
</style>
半圆
<section>
<div id="semicircle"></div>
</section>
<style type="text/css">
#semicircle{
width: 100px;
height: 50px;
background: #4C98F7;
border-radius: 100px 100px 0 0;
}
</style>
椭圆
<section>
<div id="oval"></div>
</section>
<style type="text/css">
#oval{
width: 100px;
height: 50px;
background: #4C98F7;
border-radius: 100px / 50px;
}
</style>
三角形
<section>
<div id="regular-triangle"></div>
</section>
<style type="text/css">
#regular-triangle{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #4C98F7;
}
</style>
<section>
<div id="corner-triangle"></div>
</section>
<style type="text/css">
#corner-triangle{
width: 0;
height: 0;
border-top: 100px solid #4C98F7;
border-right: 100px solid transparent;
}
</style>
平行四边形
<section>
<div id="parallelogram"></div>
</section>
<style type="text/css">
#parallelogram{
margin: 0 15px;
width: 200px;
height: 100px;
transform: skew(-20deg);
background: #4C98F7;
}
</style>
菱形
<section>
<div id="diamond"></div>
</section>
<style type="text/css">
#diamond {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: #4C98F7;
position: relative;
top: -100px;
}
#diamond:after {
content: "";
position: absolute;
left: -100px;
top: 100px;
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: #4C98F7;
}
</style>
六角星
<section>
<div id="hexagons"></div>
</section>
<style type="text/css">
#hexagons {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: #4C98F7;
position: relative;
top: -100px;
}
#diamond:after {
content: "";
position: absolute;
left: -100px;
top: 100px;
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: #4C98F7;
}
</style>
五角星
<section>
<div id="five-pointed-star"></div>
</section>
<style type="text/css">
#five-pointed-star {
margin: 100px 0 50px 0;
position: relative;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #4C98F7;
border-left: 100px solid transparent;
transform: rotate(35deg);
}
#five-pointed-star:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
border-bottom: 80px solid #4C98F7;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
transform: rotate(-35deg);
}
#five-pointed-star:after {
content: "";
position: absolute;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #4C98F7;
border-left: 100px solid transparent;
transform: rotate(-70deg);
}
</style>
心形
<section>
<div id="five-pointed-star"></div>
</section>
<style type="text/css">
#five-pointed-star {
margin: 100px 0 50px 0;
position: relative;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #4C98F7;
border-left: 100px solid transparent;
transform: rotate(35deg);
}
#five-pointed-star:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
border-bottom: 80px solid #4C98F7;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
transform: rotate(-35deg);
}
#five-pointed-star:after {
content: "";
position: absolute;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #4C98F7;
border-left: 100px solid transparent;
transform: rotate(-70deg);
}
</style>
消息框
<section>
<div id="message-box"></div>
</section>
<style type="text/css">
#message-box {
margin: 0 20px;
width: 120px;
height: 80px;
background: #4C98F7;
position: relative;
border-radius: 10px;
}
#message-box:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #4C98F7;
border-bottom: 13px solid transparent;
}
</style>
示例
<!DOCTYPE html>
<html>
<head>
<title>CSS实现图形效果</title>
<style type="text/css">
section{
margin: 10px 0;
}
#square{
width: 100px;
height: 100px;
background: #4C98F7;
}
#rectangle{
width: 200px;
height: 100px;
background: #4C98F7;
}
#circle{
width: 100px;
height: 100px;
background: #4C98F7;
border-radius: 50%;
}
#semicircle{
width: 100px;
height: 50px;
background: #4C98F7;
border-radius: 100px 100px 0 0;
}
#semicircle{
width: 100px;
height: 50px;
background: #4C98F7;
border-radius: 100px 100px 0 0;
}
#oval{
width: 100px;
height: 50px;
background: #4C98F7;
border-radius: 100px / 50px;
}
#regular-triangle{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #4C98F7;
}
#corner-triangle{
width: 0;
height: 0;
border-top: 100px solid #4C98F7;
border-right: 100px solid transparent;
}
#parallelogram{
margin: 0 15px;
width: 200px;
height: 100px;
transform: skew(-20deg);
background: #4C98F7;
}
#diamond {
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: #4C98F7;
position: relative;
top: -100px;
}
#diamond:after {
content: "";
position: absolute;
left: -100px;
top: 100px;
width: 0;
height: 0;
border: 100px solid transparent;
border-top-color: #4C98F7;
}
#hexagons{
margin: 35px 0;
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 60px solid #4C98F7;
position: relative;
}
#hexagons:after {
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 60px solid #4C98F7;
position: absolute;
content: "";
top: 20px;
left: -60px;
}
#five-pointed-star {
margin: 100px 0 70px 0;
position: relative;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #4C98F7;
border-left: 100px solid transparent;
transform: rotate(35deg);
}
#five-pointed-star:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
border-bottom: 80px solid #4C98F7;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
transform: rotate(-35deg);
}
#five-pointed-star:after {
content: "";
position: absolute;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid #4C98F7;
border-left: 100px solid transparent;
transform: rotate(-70deg);
}
#heart-shaped {
position: relative;
width: 100px;
height: 90px;
}
#heart-shaped:before,
#heart-shaped:after {
content: "";
position: absolute;
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #4C98F7;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart-shaped:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
#message-box {
margin: 0 20px;
width: 120px;
height: 80px;
background: #4C98F7;
position: relative;
border-radius: 10px;
}
#message-box:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #4C98F7;
border-bottom: 13px solid transparent;
}
</style>
</head>
<body>
<section>
<div id="square"></div>
</section>
<section>
<div id="rectangle"></div>
</section>
<section>
<div id="circle"></div>
</section>
<section>
<div id="semicircle"></div>
</section>
<section>
<div id="oval"></div>
</section>
<section>
<div id="regular-triangle"></div>
</section>
<section>
<div id="corner-triangle"></div>
</section>
<section>
<div id="parallelogram"></div>
</section>
<section>
<div id="diamond"></div>
</section>
<section>
<div id="hexagons"></div>
</section>
<section>
<div id="five-pointed-star"></div>
</section>
<section>
<div id="heart-shaped"></div>
</section>
<section>
<div id="message-box"></div>
</section>
</body>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://www.jianshu.com/p/f40617d863a3
https://css-tricks.com/the-shapes-of-css/
https://www.w3cplus.com/css/create-shapes-with-css
CSS实现图形效果的更多相关文章
- 利用CSS制作图形效果
前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧 以下所有内容只使用一个HTML元素.任何类型 ...
- 纯CSS制作图形效果
下面所有的例子都是在demo.html的基础上添加相关样式实现的. <!DOCTYPE html> <html> <head> <meta charset=& ...
- CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]
转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...
- CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- 纯 CSS 实现波浪效果！
一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...
- CSS制作图形速查表
很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...
- 【转】CSS制作图形速查表-存档
http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...
- 95+强悍的jQuery图形效果插件
现在的网站越来越离不开图形,好的图像效果能让你的网站增色不少.通过JQuery图形效果插件可以很容易的给你的网站添加一些很酷的效果. 使用JQuery插件其实比想象的要容易很多,效果也超乎想象.在本文 ...
- 一种巧妙的使用 CSS 制作波浪效果的思路
在之前,我介绍过几种使用纯 CSS 实现波浪效果的方式,关于它们有两篇相关的文章: 纯 CSS 实现波浪效果! 巧用 CSS 实现酷炫的充电动画 本文将会再介绍另外一种使用 CSS 实现的波浪效果,思 ...
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
随机推荐
- idea 修改 jsp文件之后不生效问题
- [转帖]nginx 反向代理中proxy_set_header的含义
https://www.jianshu.com/p/cd813d68ed25 0.1212020.10.23 09:29:53字数 284阅读 9,939 1.proxy_set_header设置的请 ...
- [转帖]Intel“革命性”X86s架构，带来哪些颠覆及影响？
https://www.eet-china.com/mp/a221822.html 英特尔发布了一份新的白皮书(Intel X86-S扩展架构规格),计划简化其处理器指令集架构(ISA).英特尔提供了 ...
- [转帖]docker build 中的 -f 选项
https://www.jianshu.com/p/06c35fd299b7 需要注意的是,在 docker build 命令接收的参数中,提供给 docker build 命令的 -f 选项应该 D ...
- [转帖]Cat导致内存不足原因分析
背景 线上几亿的数据在回刷的时候容器服务会出现OOM而重启,导致任务中断 内存泄露分析 jmap -histo pid 找出了有几十亿的java.lang.StackTraceElement对象,找不 ...
- SQLSERVER 数据库根据LCK_M_S对应的waitsorce 查看被锁的表信息的简单方法
公司一个开发大牛召冠总搞过一个 DMSQLMONITOR 工具 能够识别Oracle以及SQLSERVER 数据库的锁和事务等问题, 非常好用 今天环境出现了不可用的情况, 所以这边着急进行一下问题分 ...
- HanLP — 感知机(Perceptron) -- Python
HanLP - 感知机(Perceptron) 感知机 感知机是根据输入实例的特征向量 x 对其进行二类分类的线性模型: \[f(x)=sign(w\cdot x+b) \] 感知机模型对应于输入空间 ...
- 【k哥爬虫普法】简历大数据公司被查封，个人隐私是红线！
我国目前并未出台专门针对网络爬虫技术的法律规范,但在司法实践中,相关判决已屡见不鲜,K 哥特设了"K哥爬虫普法"专栏,本栏目通过对真实案例的分析,旨在提高广大爬虫工程师的法律意识, ...
- 人均瑞数系列，瑞数 4 代 JS 逆向分析
声明 本文章中所有内容仅供学习交流使用,不用于其他任何目的,不提供完整代码,抓包内容.敏感网址.数据接口等均已做脱敏处理,严禁用于商业用途和非法用途,否则由此产生的一切后果均与作者无关! 本文章未经许 ...
- Linux命令-tail命令
Linux命令-tail 命令分析 命令格式 参数 例子 Linux命令-tail 命令分析 tail命令可用于查看文件的内容,通常用来查看日志,加上-f参数就可以查看最新的日志并且不断刷新. 命令格 ...