纯 CSS 绘制图形（心形、六边形等）
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
div
{
width: 50px;
height: 50px;
background-color: red;
margin: 5px;
text-align:center;
line-height: 50px;
}
/* border-radius4个参数 左上 右上 右下 左下(顺时针) */
.box{border-radius: 50%;}
.semi-circle{border-radius: 100px 100px 0 0;height: 50px;}
.sector{border-radius: 100% 0 0 0;}
/* -webkit-transform旋转 */
.arc
{
border-radius: 100px 0 100px 0;
-webkit-transform: rotate(45deg);
}
.triangle
{
background: none;
width: 0;
height: 0;
border: 50px solid red;
border-color: red transparent transparent transparent;/* transparent透明 */
}
.rectangle::first-letter{ color: white;}
.rectangle
{
border-radius: 10px;
position: relative;
}
/*子绝父相(子级绝对定位(absolute)父亲相对定位relative)*/
.rectangle::before
{
width: 0;
height: 0;
border: 15px solid red;
border-color: transparent transparent transparent green;
content: "";
position: absolute;
right: -30px;
top: 14px;
}
.heart{
width: 60px;
height: 80px;
background: none;
position: relative;
}
/* before、after伪元素 (属于行内元素设置宽度和高度无效解决办法 absolute变成块级元素) */
.heart::before, .heart::after
{
width: 100%;
height: 100%;
content: "";
background-color: red;
position: absolute;
border-radius: 100px 100px 0 0;
-webkit-transform: rotate(-45deg);
}
.heart::after
{
-webkit-transform: rotate(45deg);
left: 46px;
}
.one,.two,.there
{
margin: 0;
visibility: hidden;
}
.one
{
width: 80px;
height: 100px;
margin: 10px;
background-color: red;
-webkit-transform: rotate(120deg);
}
.two
{
width: 100%;
height: 100%;
background-color:royalblue;
-webkit-transform: rotate(-60deg);
}
.there
{
width: 100%;
height: 100%;
background-color: yellow;
-webkit-transform: rotate(-60deg);
visibility: visible;
background: url(b.jpg);
background-size:contain;
}
.one,.two
{
overflow: hidden;
}
</style>
</head>
<body>
<div>矩形</div>
<div class="box">圆形</div>
<div class="semi-circle">半圆</div>
<div class="sector">扇形</div>
<div class="arc">弧形</div>
<div class="triangle">
<p style="line-height: 15px;position: relative;top: -65px;left: -7px;">三角形</p>
</div>
<div class="rectangle">CSS3</div>
<div class="heart"></div>
<div class="one">
<div class="two">
<div class="there"></div>
</div>
</div> </body>
</html>
运行结果
纯 CSS 绘制图形（心形、六边形等）的更多相关文章
- CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- CSS 魔法系列：纯 CSS 绘制图形（各种形状的钻石）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS图形基础：纯CSS绘制图形
为了在页面中利用CSS3绘制图形,在页面中定义 <div class="container"> <div class="shape"> ...
- 摘记 史上最强大的40多个纯CSS绘制的图形（一）
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
- 史上最强大的40多个纯CSS绘制的图形
Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...
- 40多个纯CSS绘制的图形
本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...
- 史上最强大的40多个纯CSS绘制的图形[转]
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
- 纯CSS绘制的图形一览
整理网上一些使用纯CSS绘制的图形示例~~纯属抄袭,哈哈...仅仅是为了自己以后查看! Square(正方形) #square { width: 100px; height: 100px; backg ...
- CSS 魔法系列：纯 CSS 绘制各种图形《系列六》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
随机推荐
- C# Webbrowser 常用方法及多线程调用
设置控件的值 /// <summary> /// 根据ID,NAME双重判断并设置值 /// </summary> /// <param name="tagNa ...
- 未在本地计算机上注册“Microsoft.Jet.OleDb.4.0”提供程序。解决办法
在64位服务器系统上,默认不支持Microsoft.Jet.OLEDB.4.0的驱动程序,系统默认会提示未在本地计算机上注册"Microsoft.Jet.OLEDB.4.0"的错误 ...
- Android性能优化
Android最佳性能实践 Android最佳性能实践(一)——合理管理内存 Android最佳性能实践(二)——分析内存的使用情况 Android最佳性能实践(三)——高性能编码优化 Android ...
- spring MVC入门教程
写一个spring mvc后台传值到前台的一个小例子. 分为以下几个步骤: 1.创建web项目. 导入项目包.具体有如下: spring-aop-4.0.4.RELEASE.jar spring-be ...
- Linux系统编程：基本I/O系统调用
文件描述符 进程每打开一个文件的时候,会获得该文件的文件描述符,而后续的读写操作都把文件描述符作为参数.在用户空间或者内核空间,都是通过文件描述符来唯一地索引一个打开的文件.文件描述符使用int类型表 ...
- CodeForces 698C LRU
吐槽一句:这数据造得真强-. 题意:有一个大小为k的缓存区,每次从n种物品中按照一定的概率选取一种物品尝试放进去.同一个物品每一次选取的概率都是相同的.如果这种物品已经放进去过就不再放进去.如果缓存区 ...
- BZOJ1013: [JSOI2008]球形空间产生器sphere
传送门 高斯消元练习. 模板: void Guass(){ int waited; up(i,1,N){ waited=i; up(j,i+1,N)if(fabs(M[j][i])>fabs(M ...
- linux中rz中的-e选项
linux shell rz和sz是终端下常用的文件传输命令,rz和sz通过shell被调用,其中rz用于从启用终端的系统上传文件到目标系统(终端登录的目标系统), 这里不过多介绍这些命令,只是记录一 ...
- Xcode 生成静态库相关设置：
Xcode 生成静态库相关设置: #Build Setting1. Architectures ------- Architectures -----> $(ARCHS_STANDARD) -- ...
- 关于JSF中immediate属性的总结(三)
Okay, when should I use the immediate attribute? If it isn't entirely clear yet, here's a summary, c ...