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"& ...
随机推荐
- Mybatis @Insert插入数据返回自增的主键id
mapper层 @Insert("insert into t_user (username,password,valid,create_time) values (#{username},# ...
- C++11 同步与互斥
C++11 同步与互斥 0. C++11的线程 #include <thread> 面向对象的接口 RAII(资源获取即初始化)机制,当线程对象被销毁时,会自动执行析构函数,如果线程仍然在 ...
- Oracle索引&约束
Oracle索引&约束 1索引的原理 索引是一种允许直接访问数据表某一数据行的树形结构,为了提高查询效率而引入,是独立于表的对象,可以存放在与表不同的表空间(TABLESPACE)中 索引记录 ...
- [转帖]oracle ZHS16GBK的数据库导入到字符集为AL32UTF8的数据库（转载+自己经验总结）
字符集子集向其超集转换是可行的,如此例 ZHS16GBK转换为AL32UTF8. 导出使用的字符集将会记录在导出文件中,当文件导入时,将会检查导出时使用的字符集设置,如果这个字符集不同于导入客户端的N ...
- [转帖]关于https://goproxy.cn,direct与https://proxy.golang.org的问题，国内无法访问https://proxy.golang.org设置了GOPROXY仍不可行
关于https://goproxy.cn,direct与https://proxy.golang.org的问题,国内无法访问https://proxy.golang.org设置了GOPROXY仍不可行 ...
- [转帖]Kafka需要知道的一些基础知识点
https://blog.csdn.net/daima_caigou/article/details/109101405 前言 kafka是常用MQ的一种,站在使用者的角度来看待,kafka以及所有的 ...
- [转帖]军备芯片14nm对比5nm，在战场上差距在哪里？
https://www.eet-china.com/mp/a207185.html 现在全球已经打响科技之战,每个国家都在力求让自己做到足够拔尖.美国商务部长就曾自曝家底说,美国制定两套战略应对在芯片 ...
- [转帖]Linux开源存储漫谈（2）IO性能测试利器fio
fio(Flexible I/O Tester)正是非常常用的文件系统和磁盘 I/O 性能基准测试工具.提供了大量的可定制化选项,可以用来测试,裸盘.一个单独的分区或者文件系统在各种场景下的 I/O ...
- [转帖]解析Linux gcore: 揭示程序内存捕获的秘密（linuxgcore）
https://www.dbs724.com/133618.html Linux gcore 是一种在Linux系统中使用命令行工具捕获进程内存内容的方法.它允许程序员制定程序的一个内存快照,从而帮助 ...
- [转帖]kubelet 原理解析六： 垃圾回收
https://segmentfault.com/a/1190000022163856 概述 在k8s中节点会通过docker pull机制获取外部的镜像,那么什么时候清除镜像呢?k8s运行的容器又是 ...