Article Detail

巧用边框设置一些效果

我们在做css的时候为了提高网站的效率减少服务器请求，我们可以通过css来实现一些简单的图片特效，比如说三角形，这篇文章讲解的是通过边框实现不同的效果。首先看...

HTML 阅读 79.6万 32 分钟阅读 2017-06-21 15:32

我们在做css的时候为了提高网站的效率减少服务器请求，我们可以通过css来实现一些简单的图片特效，比如说三角形，这篇文章讲解的是通过边框实现不同的效果。
首先看一下不同边框样式的效果：

<style type="text/css">
.style-border b {
	border-width:100px;
	border-color:orange blue yellow red;
	width:0px;
	height:0;
	vertical-align:middle;
	display:inline-block;
	margin:10px;
}
.style-border .style-10 {
	width:110px;
	height:100px;
	border-width:50px 40px;
	font-size:15px;
	line-height:30px;
}
.style-border .solid {
	border-style:solid;
}
.style-border .dotted {
	border-style:dotted;
}
.style-border .dashed {
	border-style:dashed;
}
.style-border .double {
	border-style:double;
}
.style-border .groove {
	border-style:groove;
}
.style-border .ridge {
	border-style:ridge;
}
.style-border .inset {
	border-style:inset;
}
.style-border .outset {
	border-style:outset;
}
</style>

<div class="style-border">
	<b class="solid style-10">实线：solid</b>
	<b class="solid"></b>
	<b class="dotted style-10">点线：dotted</b>
	<b class="dotted"></b>
	<b class="dashed style-10">虚线：dashed</b>
	<b class="dashed"></b>
	<b class="double style-10">双线：double</b>
	<b class="double"></b>
	<b class="groove style-10">3D凹槽：groove</b>
	<b class="groove"></b>
	<b class="ridge style-10">3D凸槽：ridge</b>
	<b class="ridge"></b>
	<b class="inset style-10">3D凹边：inset</b>
	<b class="inset"></b>
	<b class="outset style-10">3D凸边：outset</b>
	<b class="outset"></b>
</div>

单个边框可实现的效果：

<style type="text/css">
.one-border b {
	border-width:100px;
	border-color:orange blue yellow red;
	width:0px;
	height:0;
	vertical-align:middle;
	display:inline-block;
	margin:10px;
}
.one-border .b-1 {
	border-width:20px 20px 0;
	border-color:orange transparent transparent;
	border-style:solid dashed dashed;
}
.one-border .b-2 {
	border-width:20px 20px 20px 0;
	border-color:transparent orange transparent transparent;
	border-style:dashed solid dashed dashed;
}
.one-border .b-3 {
	border-width:0 20px 20px 20px;
	border-color:transparent transparent orange;
	border-style:dashed dashed solid;
}
.one-border .b-4 {
	border-width:20px 0 20px 20px;
	border-color:transparent transparent transparent orange;
	border-style:dashed dashed dashed solid;
}
.one-border .b-5 {
	border-width:5px 30px 50px 30px;
	border-color:#efefef #ccc #ddd orange;
	border-style:solid;
}
.one-border .b-6 {
	border-width:44px 22px 15px;
	border-color:#ccc #eee #aaa orange;
	border-style:solid;
}
.one-border .b-7 {
	border-width:0 0px 55px 55px;
	border-color:#ccc #eee #aaa orange;
	border-style:solid;
}
.one-border .b-8 {
	border-width:55px 0px 0px 55px;
	border-color:#ccc #eee #aaa orange;
	border-style:solid;
}
.one-border .b-9 {
	border-width:20px 0 50px 23px;
	border-color:#ccc #eee #aaa orange;
	border-style:solid;
}
.one-border .b-10 {
	border-width:23px 5px 0 50px;
	border-color:orange #ccc #eee #aaa;
	border-style:solid;
}
.one-border .b-11 {
	border-width:15px 44px 0 22px;
	border-color:orange #ccc #eee #aaa;
	border-style:solid;
}
.one-border .b-12 {
	border-width:55px 55px 0 0px;
	border-color:orange #ccc #eee #aaa;
	border-style:solid;
}
.one-border .b-13 {
	border-width:55px 0px 0 55px;
	border-color:orange #ccc #eee #aaa;
	border-style:solid;
}
.one-border .b-14 {
	border-width:55px 55px 0 0px;
	border-color:#ccc orange #eee #aaa;
	border-style:solid;
}
.one-border .b-15 {
	height:45px;
	border-width:5px 3px;
	border-color:transparent orange transparent transparent;
	border-style:solid;
}
.one-border .b-16 {
	height:45px;
	border-width:5px 3px;
	border-color:transparent transparent transparent orange;
	border-style:solid;
}
</style>

<div class="one-border">
    <b class="b-1"></b>
    <b class="b-2"></b>
    <b class="b-3"></b>
    <b class="b-4"></b>
    <b class="b-5"></b>
    <b class="b-6"></b>
    <b class="b-7"></b>
    <b class="b-8"></b>
    <b class="b-9"></b>
    <b class="b-10"></b>
    <b class="b-11"></b>
    <b class="b-12"></b>
    <b class="b-13"></b>
    <b class="b-14"></b>
    <b class="b-15"></b>
    <b class="b-16"></b>
</div>

两个边框可实现的效果：

<style type="text/css">
.two-border b {
	border-width:100px;
	border-color:orange blue yellow red;
	width:0px;
	height:0;
	vertical-align:middle;
	display:inline-block;
	margin:10px;
}
.two-border .b-1 {
	border-width:20px;
	border-color:orange orange transparent transparent;
	border-style:solid solid dashed dashed;
}
.two-border .b-2 {
	border-width:20px;
	border-color:transparent orange orange transparent;
	border-style:dashed solid solid dashed;
}
.two-border .b-3 {
	border-width:20px;
	border-color:transparent transparent orange orange;
	border-style:dashed dashed solid solid;
}
.two-border .b-4 {
	border-width:20px;
	border-color:orange transparent transparent orange;
	border-style:solid dashed dashed solid;
}
.two-border .b-5 {
	border-width:20px;
	border-color:orange transparent orange transparent;
	border-style:solid dashed solid dashed;
}
.two-border .b-6 {
	border-width:20px;
	border-color:transparent orange transparent orange;
	border-style:dashed solid dashed solid;
}
.two-border .b-7 {
	border-width:38px 45px 7px 21px;
	border-color:orange orange transparent transparent;
	border-style:dashed solid dashed solid;
}
.two-border .b-8 {
	border-width:38px 45px 7px 21px;
	border-color:orange transparent transparent orange;
	border-style:dashed solid dashed solid;
}
.two-border .b-9 {
	border-width:20px;
	border-color:orange;
	border-style:double outset;
}
.two-border .b-10 {
	border-width:20px;
	border-color:orange orange transparent transparent;
	border-style:groove ridge inset dashed;
}
</style>

<div class="two-border">
    <b class="b-1"></b>
    <b class="b-2"></b>
    <b class="b-3"></b>
    <b class="b-4"></b>
    <b class="b-5"></b>
    <b class="b-6"></b>
    <b class="b-7"></b>
    <b class="b-8"></b>
    <b class="b-9"></b>
    <b class="b-10"></b>
</div>

三个边框可实现的效果：

<style type="text/css">
.three-border b {
	border-width:100px;
	border-color:orange blue yellow red;
	width:0px;
	height:0;
	vertical-align:middle;
	display:inline-block;
	margin:10px;
}
.three-border .b-1 {
    border-width: 20px;
    border-color: orange;
    border-style: double outset;
}

.three-border .b-2 {
    border-width: 20px;
    border-color: orange orange orange transparent;
    border-style: groove ridge inset dashed;
}

.three-border .b-3 {
    border-width: 20px;
    border-color: orange transparent orange orange;
    border-style: solid dashed solid solid;
}

.three-border .b-4 {
    border-width: 20px;
    border-color: orange orange transparent orange;
    border-style: solid solid dashed solid;
}

.three-border .b-5 {
    border-width: 20px;
    border-color: orange orange orange transparent;
    border-style: solid solid solid dashed;
}

.three-border .b-6 {
    border-width: 20px;
    border-color: transparent orange orange orange;
    border-style: dashed solid solid solid;
}
</style>

<div class="three-border">
    <b class="b-1"></b>
    <b class="b-2"></b>
    <b class="b-3"></b>
    <b class="b-4"></b>
    <b class="b-5"></b>
    <b class="b-6"></b>
</div>

边框实现效果案例：

<style type="text/css">
.showCase {
	padding:20px;
}
.showCase:after,
.showCase:before {
	display: table;
	content: "";
	clear:both;
}
.showCase div {
	position:relative;
}
.showCase div b {
	position:absolute;
	font-size:0px;
	line-height:0px;
	margin:0;
}
.case-1 {
	border:5px solid orange;
	width:500px;
	height:150px;
}
.case-1 b {
	left:50px;
	border-style:dashed dashed solid;
}
.case-1 b.b-1 {
	border-width:0px 20px 15px;
	border-color:transparent transparent orange;
	top:-15px;
}
.case-1 b.b-2 {
	border-width:0px 20px 15px;
	border-color:transparent transparent white;
	top:-10px;
}
.case-2 {
	background-color:orange;
	width:500px;
	height:150px;
	float:left;
	margin-right:30px;
}
.case-2 b {
	left:50px;
	border-style:solid dashed dashed;
}
.case-2 b.b-1 {
	border-width:15px 20px 0px;
	border-color:orange transparent transparent;
	bottom:-14px;
}
.case-2-1 {
	width:300px;
	height:130px;
	margin-left:0px;
	background-color:orange;
	float:left;
}
.case-2-1 b.b-1 {
	border-width:20px 10px 0 60px;
	border-color:orange transparent;
	border-style:solid dashed;
	bottom:-20px;
	left:60px;
}
.case-3 {
	border:5px solid orange;
	width:250px;
	height:100px;
	margin-left:50px;
}
.case-3 b {
	top:15px;
	border-style:dashed solid dashed solid;
	border-width:20px 15px 20px 0px;
}
.case-3 b.b-1 {
	border-color:transparent orange transparent orange;
	left:-15px;
}
.case-3 b.b-2 {
	border-color:transparent white transparent transparent;
	left:-10px;
}
.case-4 {
	border:5px solid orange;
	width:250px;
	height:100px;
	margin-left:50px;
	background-color:orange;
}
.case-4 b {
	top:15px;
	border-style:dashed solid dashed solid;
	border-width:20px 0px 20px 15px;
}
.case-4 b.b-1 {
	border-color:transparent orange transparent orange;
	right:-15px;
}
.case-4 b.b-2 {
	border-color:transparent white transparent white;
	right:-10px;
	display:none;
}
.case-5 {
	border:5px solid orange;
	width:200px;
	height:80px;
	margin:10px 0 10px 50px;
	background-color:orange;
	float:left;
}
.case-5 b.b-1 {
	top:5px;
	border-color:orange orange transparent transparent;
	border-style:solid solid dashed dashed;
	border-width:20px;
	left:-40px;
}
.case-5 b.b-2 {
	top:0px;
	border-color:#fff #fff transparent transparent;
	border-style:solid solid dashed dashed;
	border-width:10px 20px 10px 28px;
	left:-53px;
}
.case-5-1 {
	width:200px;
	height:80px;
	margin-left:10px;
	background-color:orange;
	padding:5px;
	margin:10px 0px 10px 50px;
	float:left;
}
.case-5-1 b.b-1 {
	top:15px;
	border-color:transparent orange;
	border-style:solid solid dashed;
	border-width:0px 0px 40px 40px;
	right:-40px;
}
.case-5-1 b.b-2 {
	top:15px;
	border-color:transparent #fff;
	border-style:solid solid dashed;
	border-width:0px 0px 15px 40px;
	right:-40px;
}
.case-6 {
	background-color:orange;
	width:150px;
	height:30px;
}
.case-6 b.b-1 {
	border-width:15px 25px;
	border-style:solid dashed solid solid;
	border-color:orange transparent orange orange;
	right:-28px;
	top:0px;
}
.case-6 b.b-2 {
	border-width:2px 2px 2px 0px;
	border-style:dashed solid dashed dashed;
	border-color:transparent orange transparent transparent;
	left:-2px;
	top:0px;
	height:26px;
}
.case-7 {
	background-color:orange;
	width:150px;
	height:30px;
	margin-left:30px;
}
.case-7 b {
	height:26px;
	top:0px;
}
.case-7 b.b-1 {
	border-color:transparent orange transparent transparent;
	border-width:2px 2px 2px 0px;
	border-style:dashed solid dashed solid;
	left:-2px;
}
.case-7 b.b-2 {
	border-color:transparent transparent transparent orange;
	border-width:2px 0px 2px 2px;
	border-style:dashed solid dashed solid;
	right:-2px;
}

</style>

<div class="showCase">
    <div class="case-1"><b class="b-1"></b><b class="b-2"></b></div>
</div>

<div class="showCase">
    <div class="case-2"><b class="b-1"></b></div>
    <div class="case-2-1"><b class="b-1"></b><b class="b-2"></b></div>
</div>
<div class="showCase">
    <div class="case-3"><b class="b-1"></b><b class="b-2"></b></div>
</div>
<div class="showCase">
    <div class="case-4"><b class="b-1"></b><b class="b-2"></b></div>
</div>
<div class="showCase">
    <div class="case-5"><b class="b-1"></b><b class="b-2"></b></div>
    <div class="case-5-1"><b class="b-1"></b><b class="b-2"></b></div>
</div>
<div class="showCase">
    <div class="case-6"><b class="b-1"></b><b class="b-2"></b></div>
</div>
<div class="showCase">
    <div class="case-7"><b class="b-1"></b><b class="b-2"></b></div>
</div>

Comments 评论区

广西南宁市 2017-06-21 16:04

如何设置父元素透明度不影响子元素的透明度

设置父元素opacity：0.5，子元素没有设置opacity，子元素会受到父元素的影响，也会有0.5的透明度。
即使设置子元素opacity为1，也是在父元素的opacity为0.5的基础上设置为1的，那么子元素的opacity还是0.5。

解决方法：为父元素设置background: rgba(0,0,0,0.5)，不会影响子元素的显示。

#⁰

广西南宁市 2017-06-21 16:07

使用CSS3制作各种形状的图形
CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。
圆形

要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID。
圆形在设置CSS时要设置宽度和高度相等，然后设置border-radius属性为宽度或高度的一半即可：

<div id="circle"></div>                              
<style>
#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}</style>

#⁰

广西南宁市 2017-06-21 16:08

椭圆形

椭圆形是正圆形的一个变体，同样使用一个带ID的div来制作。
设置椭圆形的CSS时，高度要设置为宽度的一半，border-radius属性也要做相应的改变：
<div id="oval"></div>                              
<style>
#oval {
    width: 200px;
    height: 100px;
    background: #e9337c;
    -webkit-border-radius: 100px / 50px;
    -moz-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}</style>

广西南宁市2017-06-21 16:09:13

三角形

要创建一个CSS三角形，需要使用border，通过设置不同边的透明效果，我们可以制作出三角形的现状。另外，在制作三角形时，宽度和高度要设置为0。

<div id="triangle"></div>                              
<style>#triangle {
    width: 0;
    height: 0;
    border-bottom: 140px solid #fcf921;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}</style>

广西南宁市2017-06-21 16:10:14

倒三角形

与正三角形不同的是，倒三角形要设置的是border-top、border-left和border-right三条边的属性：

<div id="triangle"></div>
<style>#triangle {
    width: 0;
    height: 0;
    border-top: 140px solid #20a3bf;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}</style>

广西南宁市2017-06-21 16:11:16

左三角形
左三角形操作的是border-top、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。

<div id="triangle_left"></div>
<style>#triangle_left {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-right: 140px solid #6bbf20;
    border-bottom: 70px solid transparent;
} </style>

广西南宁市2017-06-21 16:11:33

#³

广西南宁市2017-06-21 16:12:21

右三角形

右三角形操作的是border-bottom、border-left和border-right三条边的属性，其中上边和下边要设置透明属性。

<div id="triangle_right"></div>
<style>#triangle_right {
    width: 0;
    height: 0;
    border-top: 70px solid transparent;
    border-left: 140px solid #ff5a00;
    border-bottom: 70px solid transparent;
}</style>

广西南宁市2017-06-21 16:13:52

菱形

制作菱形的方法有很多种。这里使用的是transform属性和rotate相结合，使两个正反三角形上下显示。

<div id="diamond"></div>
<style>#diamond {
    width: 120px;
    height: 120px;
    background: #1eff00;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);

    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    margin: 60px 0 10px 310px;
} </style>

广西南宁市2017-06-21 16:15:07

梯形
梯形是三角形的一个变体，设置CSS梯形时，左右两条边设置为相等，并且给它设置一个宽度。

<div id="trapezium"></div>
<style>#trapezium {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}</style>

广西南宁市2017-06-21 16:15:24

#⁷

广西南宁市2017-06-21 16:16:20

平行四边形

平行四边形的制作方式是使用transform属性使长方形倾斜一个角度。

<div id="parallelogram"></div>
<style>#parallelogram {
    width: 160px;
    height: 100px;
    background: #8734f7;
    -webkit-transform: skew(30deg);
    -moz-transform: skew(30deg);
    -o-transform: skew(30deg);
    transform: skew(30deg);
}</style>

广西南宁市2017-06-21 16:17:30

星形
星形的HTML结构同样使用一个带ID的空div。星形的实现方式比较复杂，主要是使用transform属性来旋转不同的边。仔细体会下面的代码。

<div id="star"></div>
<style>#star {
    width: 0;
    height: 0;
    margin: 50px 0;
    color: #fc2e5a;
    position: relative;
    display: block;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -moz-transform: rotate(35deg);
    -webkit-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    -o-transform: rotate(35deg);
}
  
#star:before {
    height: 0;
    width: 0;
    position: absolute;
    display: block;
    top: -45px;
    left: -65px;
    border-bottom: 80px solid #fc2e5a;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    content: '';
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
}
  
#star:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    display: block;
    top: 3px;
    left: -105px;
    color: #fc2e5a;
    border-right: 100px solid transparent;
    border-bottom: 70px solid #fc2e5a;
    border-left: 100px solid transparent;
    -webkit-transform: rotate(-70deg);
    -moz-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
}</style>

广西南宁市2017-06-21 16:18:07

#¹⁰

广西南宁市2017-06-21 16:19:10

六角星形

CSS六角星形
和五角星的制作方法不同，六角星形状的制作方法是操纵border属性来制作两半图形，然后合并它们。

<div id="star_six_points"></div>
<style>#star_six_points {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #de34f7;
    margin: 10px auto;
}
  
#star_six_points:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #de34f7;
    margin: 30px 0 0 -50px;
} </style>

广西南宁市2017-06-21 16:20:02

五边形

CSS五边形
创建CSS五边形需要结合两个图形：一个梯形，然后在它的上面放一个三角形，共同组成一个五边形。

<div id="pentagon"></div>
<style>#pentagon {
    width: 54px;
    position: relative;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: #277bab transparent;
}
  
#pentagon:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent #277bab;
} </style>

广西南宁市2017-06-21 16:26:17

六边形

六边形的制作方法可以有很多种，可以像五边形一样，先制作一个长方形，然后在它的上面和下面各放置一个三角形。

<div id="hexagon"></div>
<style>#hexagon {
    width: 100px;
    height: 55px;
    background: #fc5e5e;
    position: relative;
    margin: 10px auto;
}
  
#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 #fc5e5e;
}
  
#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 #fc5e5e;
}</style>

CSS八角形

八角形的制作方法也有多种方式，这里使用的是先制作两个相同的梯形，然后在两边分别放置一个三角形。

<div id="octagon"></div>
<style>#octagon {
    width: 100px;
    height: 100px;
    background: #ac60ec;
    position: relative;
}
  
#octagon:before {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}
  
#octagon:after {
    content: "";
    width: 42px;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid #ac60ec;
    border-left: 29px solid #f4f4f4;
    border-right: 29px solid #f4f4f4;
}  </style>

CSS心形

心形的制作是非常复杂的，可以使用伪元素来制作，分别将伪元素旋转不同的角度，并修改transform-origin属性来元素的旋转中心点。

<div id="heart"></div>
<style>#heart {
    position: relative;
}
  
#heart:before,#heart:after {
    content: "";
    width: 70px;
    height: 115px;
    position: absolute;
    background: red;
    left: 70px;
    top: 0;
    -webkit-border-radius: 50px 50px 0 0;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
}
  
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}  </style>

蛋形时椭圆形的一个变体，它的高度要比宽度稍大，并且设置正确的border-radius属性即可以制作出一个蛋形。

<div id="egg"></div>
<style>#egg {
    width: 136px;
    height: 190px;
    background: #ffc000;
    display: block;
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}  </style>

CSS无穷符号

无穷符号可以通过border属性和设置伪元素的角度来实现。

<div id="infinity"></div>
<style>#infinity {
    width: 220px;
    height: 100px;
    position: relative;
}
  
#infinity:before,#infinity:after {
    content: "";
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    border: 20px solid #06c999;
    -moz-border-radius: 50px 50px 0;
    border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
  
#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
    border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}</style>

消息提示框可以先制作一个圆角矩形，然后在需要的地方放置一个三角形。

<div id="comment_bubble"></div>
<style>#comment_bubble {
    width: 140px;
    height: 100px;
    background: #088cb7;
    position: relative;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}
  
#comment_bubble:before {
    content: "";
    width: 0;
    height: 0;
    right: 100%;
    top: 38px;
    position: absolute;
    border-top: 13px solid transparent;
    border-right: 26px solid #088cb7;
    border-bottom: 13px solid transparent;
}   </style>

吃豆人的制作方法是先在一个圆形里面制作一个透明的三角形。

<div id="pacman"></div>
<style>#pacman {
    width: 0;
    height: 0;
    border-right: 70px solid transparent;
    border-top: 70px solid #ffde00;
    border-left: 70px solid #ffde00;
    border-bottom: 70px solid #ffde00;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
}</style>

#⁰

广西南宁市 2017-08-09 16:48

去掉边框：

border: 0; background: transparent;

去掉小三角：

appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari 和 Chrome */

广西南宁市2017-08-09 16:49:49

去掉select三角下拉选项三角形👏

#⁰

广西南宁市 2017-12-09 15:13

纸张边角卷起效果

<script type="text/javascript">
	function isIE() {
		if (!!window.ActiveXObject || "ActiveXObject" in window || navigator.userAgent.indexOf("Edge")>-1){
			return true;
		}
		else{
			return false;
		}
	}
	if(isIE()) {
		alert("不支持IE，谢谢！")
		window.open('www.lizhenhu.com');
	}
</script>

		<style type="text/css">
			.page-wrap,.page-inner{
				margin: 0 auto;
				width: 600px;
				padding: 50px 0 0 60px;
				background: #fff;
				border-radius: 0 20px 0 0;
				text-align: justify;
			}
			.page-inner{
				padding: 0 60px 40px 0;
			}
			.page-wrap{
				position: relative;
				margin-left: 0;
				filter: drop-shadow(0px 0px 25px #aaa);
			}
			.page-wrap:before{
				content: '';
				display: block;
				position: absolute;
				right: -60px;
				top: 0;
				width: 60px;
				height: 50px;
				background: linear-gradient(42deg, #ddd 30%, rgba(0,0,0,0) 40%)
			}
		</style>

	<div class="page-wrap">
		<div class="page-inner">
			
		
		</div>
	</div>

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。