您的位置：首页 > Web前端 > CSS

纯 CSS 绘制图形（心形、六边形等）

2016-02-22 10:42 621 查看

<!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>

运行结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航