目录
图形
长方形
最最最基础的图形就是长方形（正方形为特殊长方形），设置宽和高即可，加上个background，就出来了，这里就不贴图了。
圆形 和 椭圆形
圆形
圆形是在正方形的基础上，加了个border-radius: 50%的圆角
<div class="circle"></div>
<style>
.circle{
width: 50px;
height: 50px;
background: #e9337c;
border-radius: 50%;
}
</style>
// border-radius: 50% 等价于
// border-top-left-radius: 50%;
// border-top-right-radius: 50%;
// border-bottom-right-radius: 50%;
// border-bottom-left-radius: 50%;
//border-radius 值设置的顺序，也就是一个四边形的 左上，右上，右下，左下。一个顺时针的方向。
//如果是两个值，或者是三个值，道理和四个边（border）的顺序是一样的
//举个例子
// border-radius: 2em 1em 4em;
//等价于
// border-top-left-radius: 2em;
// border-top-right-radius: 1em;
// border-bottom-right-radius: 4em;
// border-bottom-left-radius: 1em;
椭圆
椭圆是在长方形的基础上变化的，加上一个border-radius
<div class="oval"></div>
<style>
.oval{
width: 100px;
height: 50px;
background: #e9337c;
border-radius: 50px / 25px;
}
</style>
// border-radius: 50px / 25px; 等价于
// border-top-left-radius: 50px 25px;
// border-top-right-radius: 50px 25px;
// border-bottom-right-radius: 50px 25px;
// border-bottom-left-radius: 50px 25px;
//border-radius是一种缩写方法。
//水平半径 / 垂直半径
//举个例子：
// border-radius: 2em 1em 4em / 0.5em 3em;
//等价于
// border-top-left-radius: 2em 0.5em;
// border-top-right-radius: 1em 3em;
// border-bottom-right-radius: 4em 0.5em;
// border-bottom-left-radius: 1em 3em;
三角形 和 梯形
一般情况下，元素有看不到的边框（宽度为0px，颜色为transparent），如果给它的边框加上宽度和颜色，可能就会出现这样的情况
<div class="div1"></div>
<div class="div2"></div>
<style>
/* 把宽和高都设置为0*/
.div1{
width:0;
height:0;
border-left: 200px solid red;
border-top: 100px solid blue;
border-right: 100px solid green;
border-bottom: 200px solid purple;
}
/*有宽和高的*/
.div2{
width:20px;
height:50px;
border-left: 150px solid red;
border-top: 100px solid blue;
border-right: 100px solid green;
border-bottom: 60px solid purple;
}
</style>
很明显，
宽和高设置为0的图形，四个边框是由四个不同的三角形构成的，所以在写三角形的时候，就可以以这个为基础，进行变化。
宽和高有数字的图形，四个边框是由四个不同的梯形组成的，所以在写梯形的时候，就可以根据这个味基础，进行变化。
所以，三角形 和 梯形 的区别就是有没有宽和高，
锐角三角形
<div class="triangle-up"></div>
<div class="triangle-down"></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>
<style>
.triangle-up {
/* 正三角 */
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #f00;
}
.triangle-down {
/* 倒三角 */
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #f00;
}
.triangle-left {
/* 左三角 */
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid #f00;
}
.triangle-right {
/* 右三角 */
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid #f00;
}
</style>
直角三角形
<div class="triangle-topleft"></div>
<div class="triangle-topright"></div>
<div class="triangle-downleft"></div>
<div class="triangle-downright"></div>
<style>
.triangle-topleft {
/* 左上三角 */
width: 0;
height: 0;
border-right: 100px solid transparent;
border-top: 100px solid #f00;
}
.triangle-topright {
/* 右上三角 */
width: 0;
height: 0;
border-left: 100px solid transparent;
border-top: 100px solid #f00;
}
.triangle-downleft {
/* 左下三角 */
width: 0;
height: 0;
border-right: 100px solid transparent;
border-bottom: 100px solid #f00;
}
.triangle-downright {
/* 右下三角 */
width: 0;
height: 0;
border-left: 100px solid transparent;
border-bottom: 100px solid #f00;
}
</style>
梯形
梯形 给宽设置数值，没有高，其他的和三角形差不多。
<div class="trapezoid"></div>
<style>
.trapezoid {
width: 100px;
height: 0;
border-bottom: 100px solid #f00;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
增加一个特殊的三角形
<div class="horn"></div>
<style>
.horn{
width:200px;
height:30px;
background:#f00;
position:relative;
}
.horn::before{
content:'';
position:absolute;
left:100%;
width:0;
height:0;
border-top:20px solid #f00;
border-right:15px solid transparent;
border-bottom:20px solid #f00;
}
</style>
扇形、圆环、月牙
<div class="sector"></div>
<div class="ring"></div>
<div class="crescent"></div>
<style>
/* 扇形 在三角形的基础上，增加border-radius*/
.sector {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #f00;
border-radius: 50%;
}
/* 圆环 与圆形差不多，只是没有background，border的宽度大一些*/
.ring {
width: 100px;
height: 100px;
border: 5px solid #f00;
border-radius: 50%;
}
/* 月牙 在圆形的基础上，去掉背景色background:transparent; 加上阴影 box-shadow */
.crescent {
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 20px 20px 0 0 #f00;
}
</style>
菱形、平行四边形
<div class="rhomb"></div>
<div class="parallelogram"></div>
<style>
/* 菱形 正方形的基础上旋转45度 transform:rotate(45deg); */
.rhomb {
width: 100px;
height: 100px;
background: #f00;
transform: rotate(45deg);
}
/* 平行四边形 长方形的基础上 倾斜一定的度数 transform:skew(-20deg); */
.parallelogram {
width: 200px;
height: 100px;
background: #f00;
transform: skew(-20deg); /*skew()括号里可以有两个参数，第一个是水平方向的倾斜度数，第二个是垂直方向的倾斜度数*/
}
</style>
五边形、六边形、八边形
<div class="pentagon"></div>
<div class="hexagon"></div>
<div class="octagon"></div>
<style>
/* 五边形：三角形和梯形的结合 */
.pentagon {
width: 60px;
height: 0;
position: relative;
border-top: 55px solid #f00;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
.pentagon:before {
content: "";
position: absolute;
width: 0px;
height: 0;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-bottom: 35px solid #f00;
left: -25px;
top: -90px;
}
/*六边形：在长方形上面和下面各放置一个三角形*/
.hexagon {
width: 100px;
height: 55px;
background: #f00;
position: relative;
}
.hexagon:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid #f00;
}
.hexagon:after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: -25px;
left: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #f00;
}
/* 八边形：长方形、上下各放置一个梯形 */
.octagon {
width: 100px;
height: 100px;
background: #f00;
position: relative;
}
.octagon:before {
content: "";
position: absolute;
width: 42px;
height: 0;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
border-bottom: 30px solid #f00;
top: 0;
left: 0;
}
.octagon:after {
content: "";
position: absolute;
width: 42px;
height: 0;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
border-top: 30px solid #f00;
bottom: 0;
left: 0;
}
</style>
五角星、六角形、八角星、十二角星
<div class="starFive"></div>
<div class="starFive"></div>
<div class="starFive"></div>
<div class="starFive"></div>
<style>
/* 五角星： */
.starFive {
width: 0;
height: 0;
position: relative;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 60px solid #f00;
transform: rotate(35deg);
}
.starFive:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 60px solid #f00;
transform: rotate(-70deg);
top: 3px;
left: -80px;
}
.starFive:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-bottom: 60px solid #f00;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
transform: rotate(-35deg);
top: -40px;
left: -49px;
}
/* 六角形：两个三角形组成 */
.starSix {
width: 0;
height: 0;
position: relative;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #f00;
}
.starSix:before {
content: "";
width: 0;
height: 0;
position: absolute;
top: 30px;
left: -50px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #f00;
}
/* 八角星：两个正方形，旋转角度 */
.starEight {
width: 100px;
height: 100px;
background: #f00;
position: relative;
}
.starEight:before {
content: "";
width: 100px;
height: 100px;
background: #f00;
position: absolute;
top: 0;
left: 0;
transform: rotate(45deg);
}
/* 十二角星：三个正方形，旋转角度 */
.starTwelve {
width: 100px;
height: 100px;
background: #f00;
position: relative;
}
.starTwelve:before {
content: "";
width: 100px;
height: 100px;
background: #f00;
position: absolute;
top: 0;
left: 0;
transform: rotate(-30deg)
}
.starTwelve:after {
content: "";
width: 100px;
height: 100px;
background: #f00;
position: absolute;
top: 0;
left: 0;
transform: rotate(30deg)
}
</style>
爱心、无穷大符号、食人豆、八卦图
<div class="love"></div>
<div class="infinity"></div>
<div class="pacman"></div>
<div class="eightDiagrams"></div>
<style>
/* 爱心 */
.love {
position: relative;
}
.love:before {
content: "";
width: 70px;
height: 110px;
background: #f00;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(45deg);
}
.love:after {
content: "";
width: 70px;
height: 110px;
background: #f00;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(-45deg);
left: -30px;
}
/* 无穷大 */
.infinity {
width: 190px;
height: 100px;
position: relative;
}
.infinity:before {
content: "";
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 0;
border: 20px solid #f00;
border-radius: 50px 50px 0 50px;
transform: rotate(-45deg);
}
.infinity:after {
content: "";
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
border: 20px solid #f00;
border-radius: 50px 50px 50px 0;
transform: rotate(45deg);
}
/* 食人豆 */
.pacman {
width: 0;
height: 0;
border: 60px solid #f00;
border-right: 60px solid transparent;
border-radius: 100%;
}
/* 八卦：多个圆形组成 */
.eightDiagrams {
width: 100px;
height: 50px;
border-color: #f00;
border-width: 2px 2px 50px 2px;
border-style: solid;
border-radius: 50%;
position: relative;
}
.eightDiagrams:before {
content: "";
position: absolute;
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
top: 50%;
left: 0;
border: 19px solid #f00;
}
.eightDiagrams:after {
content: "";
position: absolute;
width: 12px;
height: 12px;
background: #f00;
border-radius: 50%;
top: 50%;
left: 50%;
border: 19px solid #fff;
}
</style>
优惠券
我们常见的优惠券有这样的
代码贴出来：
<style>
.box{
width: 160px;
height: 100px;
background-image: radial-gradient(circle at 9px 8px ,transparent 0%, transparent 8px,#e15852 8px, #e15852 100%);
background-position: 121px -8px;
background-size: 100% 100px;
}
</style>
<div class="box"></div>
radial-gradient() 函数创建一个，用来展示由原点（渐变中心）辐射开的颜色渐变。
其语法是：
background: radial-gradient(shape size at position, start-color, …, last-color);
background-position:圆画在优惠券的左边
background-size: （x,y）两个圆之间的距离
也有这样的：
代码如下：
<div class="demo">
<div class="stamp stamp01">
<div class="par"><p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
<div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div>
<i></i>
</div>
<div class="stamp stamp02">
<div class="par"><p>XXXXXX折扣店</p><sub class="sign">￥</sub><span>50.00</span><sub>优惠券</sub><p>订单满100.00元</p></div>
<div class="copy">副券<p>2015-08-13<br>2016-08-13</p><a href="#">立即使用</a></div>
<i></i>
</div>
</div>
<style>
.demo{ width:410px; margin-top:100px; }
.stamp {
width: 387px;
height: 140px;
padding: 0 10px;
margin-bottom: 50px;
position: relative;
overflow: hidden;
}
.stamp:before {
content: '';
position: absolute;
top:0;
bottom:0;
left:10px;
right:10px;
z-index: -1;
}
.stamp:after {
content: '';
position: absolute;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.5);
z-index: -2;
}
.stamp *{
padding: 0;
margin: 0;
list-style:none;
font-family:"Microsoft YaHei",'Source Code Pro', Menlo, Consolas, Monaco, monospace;
}
.stamp i{
position: absolute;
left: 20%;
top: 45px;
height: 190px;
width: 390px;
background-color: rgba(255,255,255,.15);
transform: rotate(-30deg);
}
.stamp .par{
float: left;
padding: 16px 15px;
width: 220px;
border-right:2px dashed rgba(255,255,255,.3);
text-align: left;
}
.stamp .par p{
color:#fff;
font-size: 16px;
line-height: 21px;
}
.stamp .par span{
font-size: 50px;
color:#fff;
margin-right: 5px;
line-height: 65px;
}
.stamp .par .sign{ font-size:34px; }
.stamp .par sub{
position:relative;
top:-5px;
color:rgba(255,255,255,.8);
}
.stamp .copy{
display: inline-block;
padding:21px 14px;
width:100px;
vertical-align: text-bottom;
font-size: 30px;
color:rgb(255,255,255);
text-align: center;
line-height: initial;
}
.stamp .copy p{ font-size:16px; margin-top:15px; }
.stamp01{
background: #7EAB1E;
background: radial-gradient(transparent 0, transparent 5px, #7EAB1E 5px);
background-size: 15px 15px;
background-position: 9px 3px;
}
.stamp01:before{ background-color:#7EAB1E; }
.stamp01 .copy{
padding: 10px 6px 10px 12px;
font-size: 24px;
}
.stamp01 .copy p{
font-size: 14px;
margin-top: 5px;
margin-bottom: 8px;
}
.stamp01 .copy a{
background-color:#fff;
color:#333;
font-size: 14px;
text-decoration:none;
padding:5px 10px;
border-radius:3px;
display: block;
}
.stamp02{
width: 390px;
background: #50ADD3;
background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 4px, #50ADD3 4px);
background-size: 12px 8px;
background-position: -5px 10px;
}
.stamp02:before{
background-color:#50ADD3;
left: 5px;
right: 5px;
}
.stamp02 .copy{
padding: 10px 6px 10px 12px;
font-size: 24px;
}
.stamp02 .copy p{
font-size: 14px;
margin-top: 5px;
margin-bottom: 8px;
}
.stamp02 .copy a{
background-color:#fff;
color:#333;
font-size: 14px;
text-decoration:none;
padding:5px 10px;
border-radius:3px;
display: block;
}
</style>
3276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
