点击打开链接
原文地址：http://www.cnblogs.com/keepfool/p/5616326.html
参考链接：http://www.cnblogs.com/sdjiegeng/p/5836239.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
div {
float: left;
margin: 10px;
}
div.main0 {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
div.main1 {
width: 200px;
/*width和height相等时就是园*/
height: 100px;
background: red;
border-radius: 50%;
}
div.main2 {
width: 100px;
/*width和height相等时就是园*/
height: 100px;
background: red;
border-radius: 100px/50px;
}
div.main3 {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
div.main4 {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
div.main5 {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
div.main6 {
width: 80px;
height: 80px;
background: red;
transform: rotate(-45deg);
margin-left: 20px;
}
div.main7 {
height: 0;
width: 100px;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
div.main8 {
width: 160px;
height: 100px;
background: red;
transform: skew(30deg);
}
</style>
</head>
<body>
<div class="main0"></div>
<div class="main1"></div>
<div class="main2"></div>
<div class="main3"></div>
<div class="main4"></div>
<div class="main5"></div>
<div class="main6"></div>
<div class="main7"></div>
<div class="main8"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/* [01.基础样式] */
* {
font-family: simhei, sans-serif;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background-color: black;
}
div {
margin: 20px auto;
}
/* [02.旗帜样式 ]*/
.flag {
width: 0;
height: 0;
border: 2rem solid #FF6600;
border-top-width: 4rem;
border-bottom-color: transparent;
border-bottom-width: 2rem;
}
/* [03.向右的双实心箭头样式] */
.rds-arrow-wrapper {
position: relative;
width: 20em;
text-align: center;
}
.rds-arrow,
.rds-arrow:after {
display: inline-block;
position: relative;
width: 0;
height: 0;
border-top: 1rem solid transparent;
border-left: 2rem solid #fff;
border-bottom: 1rem solid transparent;
border-right: 2rem solid transparent;
}
.rds-arrow {
margin-left: 1rem;
}
.rds-arrow:after {
content: "";
position: absolute;
left: 100%;
top: -1rem;
bottom: 0;
}
/* [04.气泡样式] */
.bubble {
position: relative;
background-color: #33AAEE;
width: 10rem;
height: 3rem;
font-size: 2rem;
line-height: 3rem;
color: #FFF;
text-align: center;
}
.bubble:before {
position: absolute;
content: "";
right: 100%;
top: 1rem;
width: 0;
height: 0;
border-top: 0.6rem solid transparent;
border-right: 0.6rem solid #33AAEE;
border-bottom: 0.6rem solid transparent;
border-left: 0.6rem solid transparent;
}
.bubble .text {
display: inline-block;
}
/* [05.丝带样式] */
/* 丝带主体长方形 */
.ribbon {
position: relative;
width: 10rem;
height: 3rem;
padding: 0.7rem 0;
font-size: 1.6rem !important;
color: #fff;
text-align: center;
background: #ff0066;
}
/* 丝带左右两侧的耳朵 */
.ribbon:before,
.ribbon:after {
content: "";
position: absolute;
display: block;
bottom: -0.6rem;
border: 1.5rem solid #ff0066;
z-index: -1;
}
.ribbon:before {
left: -2.4rem;
border-right-width: 1.5rem;
border-left-color: transparent;
box-shadow: 1px 1px 0 rgba(176, 102, 166, 0.8);
}
.ribbon:after {
right: -2.4rem;
border-left-width: 1.5rem;
border-right-color: transparent;
box-shadow: 0 1px 0 rgba(176, 102, 166, 0.8);
}
/* 丝带阴影 */
.ribbon .ribbon-content:before,
.ribbon .ribbon-content:after {
content: "";
position: absolute;
display: block;
border-style: solid;
border-color: #bf004c transparent transparent transparent;
bottom: -0.6rem;
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 0.6rem 0 0 0.6rem;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 0.6rem 0.6rem 0 0;
}
</style>
</head>
<body>
<div class="flag"></div>
<div class="rds-arrow-wrapper"><span class="rds-arrow"></span></div>
<div class="bubble"><span class="text">立即查看</span></div>
<div class="ribbon">
<span class="ribbon-content">金卡会员</span>
</div>
</body>
</html>
气泡框（或者提示框）是网页中一种很常见的元素，大多用来展示提示信息，如下图所示：
拆分来看，形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头，要制作出这样的气泡框，如果解决了三角形小箭头就容易了。一种方法就是制作这样一个三角形箭头的图片，然后定位在矩形框上。但这种解决办法在后期更改气泡框会很不方便，可能每修改一次气泡框都要重新制作一个三角形小图标。如果我们能够直接用HTML和CSS代码实现这样一个三角形小箭头一切都迎刃而解了。
首先我们来看一下border这个属性，当我们把一个div的border-color设为不同值的时候，可以看到四边都成了一个梯形。
|
1
|
# test{
width
:
50px
;
height
:
50px
;
border-width
:
50px
;
border-style
:
solid
;
border-color
:
#09F
#990
#933
#0C9
;}
|
如果我们继续把这个div的width和height都设为0，可以看到四边都成了一个三角形。
|
1
|
# test{
width
:
0
;
height
:
0
;
border-width
:
75px
;
border-style
:
solid
;
border-color
:
#09F
#990
#933
#0C9
;}
|
在主流浏览器中检测一下，发现IE6中存在一个小问题，上下边能形成三角形，左右两边仍然还是梯形
通过实验发现当把div的font-size和line-height都设为0的时候，div的四边在IE6下都能形成完美的三角形：
|
1
|
#test{
width
:
0
;
height
:
0
;
border-width
:
75px
;
border-style
:
solid
;
border-color
:
#09F
#990
#933
#0C9
;
font-size
:
0
;
line-height
:
0
;}
|
很显然我们只需要其中的一个三角形，那么只需要将其他三边的color设置为透明或者跟页面背景一样的颜色，就能模拟出一个三角来，推荐将其他三边颜色设置为透明，即color的值为transparent，如果其他三边颜色跟页面背景一样，虽然视觉上只能看到一个三角，但背景颜色一旦改变，其他三边颜色也要随之改变。
|
1
|
#test{
width
:
0
;
height
:
0
;
border-width
:
75px
;
border-style
:
solid
;
border-color
:
#09F
transparent
transparent
;
font-size
:
0
;
line-height
:
0
;}
|
问题又来了，IE6下transparent无效！其他三边被设置成默认的黑色了。
但通过实验发现把border-style设置为dashed后，IE6下其他三边就能透明了！
|
1
|
#test{
width
:
0
;
height
:
0
;
border-width
:
75px
;
border-style
:
solid
dashed
dashed
;
border-color
:
#09F
transparent
transparent
;
font-size
:
0
;
line-height
:
0
;}
|
到这一步我们已经成功的模拟出了一个小三角，下一步我们把这个小三角同矩形框结合起来。先设置一个矩形框，然后把小三角定位到矩形框上。先来写出HTML结构：
|
1
2
3
4
|
<
div
class="tag">
<
em
></
em
>
CSS气泡框实现
</
div
>
|
CSS样式：
|
1
2
|
.tag{
width
:
300px
;
height
:
100px
;
border
:
5px
solid
#09F
;
position
:
relative
;}
.tag em{
display
:
block
;
border-width
:
20px
;
position
:
absolute
;
bottom
:
-40px
;
left
:
100px
;
border-style
:
solid
dashed
dashed
;
border-color
:
#09F
transparent
transparent
;
font-size
:
0
;
line-height
:
0
;}
|
效果如下：
现在指示方向的三角形箭头是实心的，而我们想要的是镂空的效果，这里我们再叠加一个同气泡框背景颜色一样的小三角，然后把这个叠加的小三角移动一下位置就能达到了。
首先需要对HTML结构进行调整，如下：
|
1
2
3
4
5
|
<
div
class="tag">
<
em
></
em
>
<
span
></
span
>
CSS气泡框实现
</
div
>
|
CSS样式修改为：
|
1
2
3
|
.tag{
width
:
300px
;
height
:
100px
;
border
:
5px
solid
#09F
;
position
:
relative
;
background-color
:
#FFF
;}
.tag em{
display
:
block
;
border-width
:
20px
;
position
:
absolute
;
bottom
:
-40px
;
left
:
100px
;
border-style
:
solid
dashed
dashed
;
border-color
:
#09F
transparent
transparent
;
font-size
:
0
;
line-height
:
0
;}
.tag span{
display
:
block
;
border-width
:
20px
;
position
:
absolute
;
bottom
:
-33px
;
left
:
100px
;
border-style
:
solid
dashed
dashed
;
border-color
:
#FFF
transparent
transparent
;
font-size
:
0
;
line-height
:
0
;}
|
最终效果如下所示：
注意：叠加的小三角span的bottom值并不是border-width的值，两个小三角bottom的差值理论上应该是2(border-width)2的平方根
最后来把代码优化一下，以便在后期更容易维护，完整的HTML结构：
|
1
2
3
4
5
6
|
<
div
class="tag">
<
div
class="arrow">
<
em
></
em
><
span
></
span
>
</
div
>
CSS气泡框实现
</
div
>
|
CSS样式修改为：
|
1
2
3
4
5
|
.tag{
width
:
300px
;
height
:
100px
;
border
:
5px
solid
#09F
;
position
:
relative
;
background-color
:
#FFF
;}
.arrow{
position
:
absolute
;
width
:
40px
;
height
:
40px
;
bottom
:
-40px
;
left
:
100px
; }
.arrow *{
display
:
block
;
border-width
:
20px
;
position
:
absolute
;
border-style
:
solid
dashed
dashed
dashed
;
font-size
:
0
;
line-height
:
0
; }
.arrow em{
border-color
:
#09F
transparent
transparent
;}
.arrow span{
border-color
:
#FFF
transparent
transparent
;
top
:
-7px
;}
|
举一反三：不规则三角箭头的气泡框又如何实现？
HTML结构同前面一样：
|
1
2
3
4
5
6
|
<
div
class="tag">
<
div
class="arrow">
<
em
></
em
><
span
></
span
>
</
div
>
CSS气泡框实现
</
div
>
|
矩形框CSS样式稍微改动一下：
|
1
|
.tag{
width
:
300px
;
height
:
100px
;
position
:
relative
;
background-color
:
#09F
;}
|
重新定位一下三角箭头：
|
1
|
.arrow{
position
:
absolute
;
width
:
70px
;
height
:
60px
;
left
:
-70px
;
bottom
:
10px
;}
|
元素相邻的两边border-style值设为solid（显示），另两边设为transparent（不会显示）
|
1
|
.arrow *{
display
:
block
;
position
:
absolute
;
border-style
:
dashed
solid
solid
dashed
;
font-size
:
0
;
line-height
:
0
; }
|
首先模拟一个直角三角形，把一个元素的相邻两边color设为相同的值，另外两边颜色设为透明，即可得到一个直角：
|
1
|
.arrow em{
border-color
:
transparent
#09F
#09F
transparent
;
border-width
:
30px
35px
;}
|
把两个直角三角形重叠在一起就可以得到一个不规则三角形
|
1
|
.arrow span{
border-width
:
20px
35px
;
border-color
:
transparent
#FFF
#FFF
transparent
;
bottom
:
0
;}
|
至此，不规则三角箭头的气泡框效果已经实现。
除了通过设置元素的border来模拟小三角之外，还可以用特殊字符来模拟，用特殊字符模拟小三角同样需要用到定位和重叠覆盖，只不过不需要调整border属性了。
先来看一个菱形“◆” ，它在页面中的代码是“◆”，需要注意的是页面编码需要设置为utf-8，在网页中可以把◆当作文字处理，可以通过调整font-size来它的大小、通过color来设置它的颜色。
HTML结构依然用前面的，不同的是在em、span标签中加入了 ◆
|
1
2
3
4
5
6
|
<
div
class="tag">
<
div
class="arrow">
<
em
>◆</
em
><
span
>◆</
span
>
</
div
>
CSS气泡框实现
</
div
>
|
先来设置最外层div的样式，得到一个矩形框：
|
1
|
.tag{
width
:
300px
;
height
:
100px
;
position
:
relative
;
border
:
5px
solid
#09F
;}
|
接着定位箭头最外层容器div，便于观察可以先设置一个背景色 ：
|
1
|
.arrow{
position
:
absolute
;
width
:
40px
;
height
:
40px
;
left
:
100px
;
bottom
:
-40px
;
overflow
:
hidden
;}
|
再对◆设置样式：
|
1
|
.arrow *{
display
:
block
;
position
:
absolute
;
font-size
:
40px
;
line-height
:
40px
;
width
:
40px
;
font-family
:SimSun;
font-style
:
normal
;
font-weight
:
normal
;
text-align
:
center
;
vertical-align
:
middle
;}
|
注意：为了◆主流浏览器中显示一致，需要清除浏览器的默认字体样式，特别注意这里字体的设置
再分别修改em、span标签的字体颜色，并对这两个标签定位：
|
1
2
|
.arrow em{
color
:
#09F
;
top
:
-15px
;}
.arrow span{
color
:
#FFF
;
top
:
-22px
;}
|
注意：该例子中em和span两个元素垂直方向相差约7px，原来同上面提到的一样，差值理论上应该是2(border-width)2的平方根
完整CSS样式：
|
1
2
3
4
5
|
.tag{
width
:
300px
;
height
:
100px
;
position
:
relative
;
border
:
5px
solid
#09F
;}
.arrow{
position
:
absolute
;
width
:
40px
;
height
:
40px
;
left
:
100px
;
bottom
:
-40px
;
overflow
:
hidden
;}
.arrow *{
display
:
block
;
position
:
absolute
;
font-size
:
40px
;
line-height
:
40px
;
width
:
40px
;
font-family
:SimSun;
font-style
:
normal
;
font-weight
:
normal
;
text-align
:
center
;
vertical-align
:
middle
;}
.arrow em{
color
:
#09F
;
top
:
-15px
;}
.arrow span{
color
:
#FFF
;
top
:
-22px
;}
|
最终效果如下：
HTML特殊字符查询：http://ikwebdesigner.com/special-characters/
补充：以上方式实现小三角的过程中不可避免的增加了多余的标签，如果不要求所有浏览器中显示一致的话， 我们可以利用css3来实现这个小三角
HTML结构：
|
1
2
3
|
<
div
class="tag">
css3气泡框
</
div
>
|
CSS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
.tag{
width
:
300px
;
height
:
100px
;
border
:
5px
solid
#09F
;
position
:
relative
;
background-color
:
#FFF
;
}
.tag:before,.tag:after{
content
:
""
;
display
:
block
;
border-width
:
20px
;
position
:
absolute
;
bottom
:
-40px
;
left
:
100px
;
border-style
:
solid
dashed
dashed
;
border-color
:
#09F
transparent
transparent
;
font-size
:
0
;
line-height
:
0
;
}
.tag:after{
bottom
:
-33px
;
border-color
:
#FFF
transparent
transparent
;
}
|
效果同上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="refresh" content="2">
<title></title>
<style>
.tag {
margin: 50px;
width: 300px;
height: 100px;
border: 5px solid #09F;
position: relative;
background-color: #FFF;
padding: 10px;
}
.tag:before,
.tag:after {
content: "";
display: block;
border-width: 20px;
position: absolute;
top: -40px;
left: 10px;
border-style: solid;
border-color: transparent transparent #09F transparent;
font-size: 0;
line-height: 0;
}
.tag:after {
top: -33px;
border-color:transparent transparent #FFF transparent ;
}
</style>
</head>
<body>
<div class="tag">
css3气泡框
</div>
</body>
</html>
现在看到了很多带小三角形的方框，如微信、Mac版的QQ、QQ空间的时间轴等等，在聊天或者是发表的状态的内容外面都有一个带小三角形的矩形框包围着，感觉看着很不错，于是决定亲自动手写一个，我上次用的是偏移背景图片法，那么今天就不用图片，用CSS3实现一下，下面我们来看一下实现代码。
首先我们来看一下CSS3实现三角形原理：其实就是对于transparent的应用
假如html代码是这样的
<div class="arrow-up">
<!--向上的三角-->
</div>
<div class="arrow-down">
<!--向下的三角-->
</div>
<div class="arrow-left">
<!--向左的三角-->
</div>
<div class="arrow-right">
<!--向右的三角-->
</div>
下面用CSS3分别实现向上、下、左、右的三角形
/*箭头向上*/
.arrow-up {
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid #fff;
}
/*箭头向下*/
.arrow-down {
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #0066cc;
}
/*箭头向左*/
.arrow-left {
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid yellow;
}
/*箭头向右*/
.arrow-right {
width:0;
height:0;
border-top:50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid green;
}
ok代码整理在一起后，效果大概是这样的：
好了原理我们了解了，那么我们就实战一下吧，来实现带小三角形的div框。
首先，写出html代码：
<div class="entry">
<div class="entry-trangle"><!--本Div只来实现三角形，无其他作用--></div>
hello，我出生了<br/>
hello，我出生了<br/>
hello，我出生了<br/>
hello，我出生了<br/>
</div>
挂载有类"entry-trangle"的div只用来实现小三角形。对这个div用css3的transparent实现三角形，然后绝对定位、设置z-index:-1;、margin-left:-19px;，看下面css代码：
<style type="text/css">
*{margin:0;padding:0;}
body{
background:#666;
font:14px/20px "Microsoft YaHei";
}
.entry{
margin:0 auto;
margin-top:20px;
width:280px;
background:#fff;
padding:10px;
/*设置圆角*/
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.entry-trangle{
position:absolute;
margin-left:-19px;
width:0;
height:0;
border-top:10px solid transparent;
border-bottom:10px solid transparent;
border-right:10px solid #fff;
z-index:-1;
}
</style>
border-radius:5px;用来实现圆角；绝对定位、z-index:-1;的目的都是使控制小三角形的div在最底层，不影响父级div里面的内容布局。
好了，我们已经完工了，这是
CSS三角形绘制方法，学会了这个，其它的也就简单：http://www.jb51.net/article/42513.htm
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。
今天给大家带来 CSS 三角形绘制方法
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
*******************************************************************************************************************************************************************************
2016-08-09 08:53 by 流浪的诗人, 565 阅读, 评论, 收藏, 编辑
1、圆形
示例:
思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下：
html:
<div class="size example1"></div>
css:
.size{
width:200px;
height: 200px;
background: #8BC34A;
}
.example1{
border-radius:100px;
}
2、自适应椭圆
思路：border-radius 这个属性还有另外一个鲜为人知的真相，它不仅可以接受长度值，还可以接受百分比值。这个百分比值会基于元素的尺寸进行解析.这意味着相同的百分比可能会计算出不同的水平和垂直半径。代码如下：
html:
<div class="example3"></div>
css:
.example3{
width:200px;
height: 150px;
border-radius:50%;
background: #8BC34A;
}
3、自适应的半椭圆:沿横轴劈开的半椭圆
思路：border-radius 的语法比我们想像中灵活得多。你可能会惊讶地发现 border-radius 原来是一个简写属性。第一种方法就是使用它所对应的各个展开式属性：
- „ border-top-left-radius
- „ border-top-right-radius
- „ border-bottom-right-radius
- „ border-bottom-left-radius
我们甚至可以为所有四个角提供完全不同的水平和垂直半径，方法是在斜杠前指定 1~4 个值，在斜杠后指定另外 1~4 个值。举例来说，当 border-radius 的值为10px / 5px 20px 时，其效果相当于 10px 10px 10px 10px / 5px 20px 5px 20px 。
为 border-radius 属性分别指定4、3、2、1 个由空格分隔的值时，这些值是以这样的规律分配到四个角上的（请注意，对椭圆半径来说，斜杠前和斜杠后最多可以各有四个参数，这两组值是以同样的方法分配到各个角的）
代码如下：自适应的半椭圆:沿横轴劈开的半椭圆
html:
<div class="example4"></div>
css:
.example4{
width:200px;
height: 150px;
border-radius: 50% / 100% 100% 0 0;
background: #8BC34A;
}
4、自适应的半椭圆:沿纵轴劈开的半椭圆
思路：自适应的半椭圆:沿纵轴劈开的半椭圆
代码如下：
html:
<div class="example5"></div>
css:
.example5{
width:200px;
height: 150px;
border-radius: 100% 0 0 100% / 50%;
background: #8BC34A;
}
5、四分之一椭圆
思路：其中一个角的水平和垂直半径值都需要是100%，而其他三个角都不能设为圆角。
代码如下：
html:
<div class="example6"></div>
css:
.example6{
width:160px;
height: 100px;
border-radius: 100% 0 0 0;
background: #8BC34A;
}
6、用椭圆绘制opera浏览器的logo
思路：绘制opera浏览器的logo,分析起来不难，就只有两个图层，一个是最底部的椭圆，一个是最上面那层的椭圆。先确定一下最底层的椭圆宽高，量了一下，水平宽度为258px，垂直高度为275px，因为其是一个对称的椭圆，没有倾斜度，故4个角均为水平半径为258px，垂直半径为275px的4个相等椭圆，用同样的办法确定最里面的椭圆的半径，因此，四个角均为水平半径120px，垂直半径为229px的椭圆，代码如下：
html:
<div class="opera">
<div class="opera-top"></div>
</div>
css:
.opera{
width:258px;
height: 275px;
background: #F22629;
border-radius:258px 258px 258px 258px /275px 275px 275px 275px;
position: relative;
}
.opera-top{
width: 112px;
height: 231px;
background: #FFFFFF;
border-radius: 112px 112px 112px 112px/231px 231px 231px 231px;
position: absolute;
left: 50%;
right: 50%;
top: 50%;
bottom: 50%;
margin-left: -56px;
margin-top: -115px;
}
7、平行四边形
思路：伪元素方案:是把所有样式（背景、边框等）应用到伪元素上，然后再对 伪元素进行变形。因为我们的内容并不是包含在伪元素里的，所以内容并不会受到变形的影响。代码如下：
html:
<div class="button">transform:skew()</div>
css:
.button {
width:200px;
height: 100px;
position: relative;
left: 100px;
line-height: 100px;
text-align: center;
font-weight: bolder;
}
.button::before {
content: ''; /* 用伪元素来生成一个矩形 */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
transform: skew(45deg);
background: #8BC34A;
}
技巧总结：这个技巧不仅对 skew() 变形来说很有用，还适用于其他任何变形样式，当我们想变形一个元素而不想变形它的内容时就可以用到它。
8、菱形
思路：我们把这个技巧针对 rotate() 变形样式稍稍调整一下，再用到一个正方形元素上，就可以很容易地得到一个菱形。代码如下：
html:
<div class="example1">transform:rotate()</div>
css:
.example1 {
width:140px;
height: 140px;
position: relative;
left: 100px;
line-height: 100px;
text-align: center;
font-weight: bolder;
}
.example1::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
transform: rotate(45deg);
background: #8BC34A;
}
技巧总结：这个技巧的关键在于，我们利用伪元素以及定位属性产生了一个方块， 然后对伪元素设置样式，并将其放置在其宿主元素的下层。这种思路同样可 以运用在其他场景中，从而得到各种各样的效果。
9、菱形图片
思路：基于变形的方案，
我们想让图片的宽度与容器的对角线相等，而不是与边长相等。需要用到勾股定理，这个定理告诉我们，一个正方形的对角线长度等于它的边长乘以根号2，约等于1.414 213 562 。因此，把 max-width 的值设置为根号2乘以100%约等于 414.421 356 2% 是很合理的，或者把这个值向上取整为 142% ，因为我们不希望因为计算的舍入问题导致图片在实际显示时稍小（但稍大是没问题的，反正我们都是在裁切图片嘛）
代码如下：
html:
<div class="picture">
<img src="./imgs/7.jpg">
</div>
css:
.picture {
width: 200px;
transform: rotate(45deg);
overflow: hidden;
margin: 50px;
}
.picture img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
z-index: -1;
position: relative;
}
技巧总结：我们希望图片的尺寸属性保留 100% 这个值，这样当浏览器不支持变 形样式时仍然可以得到一个合理的布局。 „ 通过 scale() 变形样式来缩放图片时，是以它的中心点进行缩放的 （除非我们额外指定了 transform-origin 样式） 。通过 width 属性 来放大图片时，只会以它的左上角为原点进行缩放，从而迫使我们 动用额外的负外边距来把图片的位置调整回来.
10、切角效果
思路：基于background:linear-gradient()的方案:把四个角都做出切角效果了。你需要四层渐变图案，代码如 下所示：
html:
<div class="example2">Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>
css:
.example2{
background: #8BC34A;
background: linear-gradient(135deg, transparent 15px, #8BC34A 0) top left,
linear-gradient(-135deg, transparent 15px, #8BC34A 0) top right,
linear-gradient(-45deg, transparent 15px, #8BC34A 0) bottom right,
linear-gradient(45deg, transparent 15px, #8BC34A 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
padding: 1em 1.2em;
max-width: 12em;
line-height: 1.5em;
}
11、弧形切角
思路：上述渐变技巧还有一个变种，可以用来创建弧形切角（很多人也把这种 效果称为“内凹圆角” ，因为它看起来就像是圆角的反向版本） 。唯一的区别 在于，我们会用径向渐变来替代上述线性渐变，代码如下：
html:
<div class="example3">Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>
css:
.example3{
background: #8BC34A;
background: radial-gradient(circle at top left, transparent 15px, #8BC34A 0) top left,
radial-gradient(circle at top right, transparent 15px, #8BC34A 0) top right,
radial-gradient(circle at bottom right, transparent 15px, #8BC34A 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, #8BC34A 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
padding: 1em 1.2em;
max-width: 12em;
}
12、简单的饼图
思路：基于 transform 的解决方案：我们现在可以通过一个 rotate() 变形属性来让这个伪元素转起来。 如果我们要显示出 20% 的比率，我们可以指定旋转的值为 72deg （0.2 × 360 = 72） ，写成 .2turn 会更加直观一些。你还可以看到其 他一些旋转值的情况。代码如下：
html:
css：
.pie{
width:140px;
height: 140px;
background: #8BC34A;
border-radius: 50%;
background-image: linear-gradient(to right,transparent 50%,#655 0);
}
.pie::before{
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
transform: rotate(.1turn);/*10%*/
transform: rotate(.2turn);/*20%*/
transform: rotate(.3turn);/*30%*/
}
提示：在参数中规定角度。turn是圈，1turn = 360deg；另外还有弧度rad，2nrad = 1turn = 360deg。如，transform:rotate(2turn); //旋转两圈
此方法显示 0 到 50% 的比率时运作良好，但如果我们尝试显示 60% 的比率时（比如指定旋转值为 .6turn 时），会出现问题。解决方法：使 用上述技巧的一个反向版本来实现这个范围内的比率：设置一个棕色的伪 元素，让它在 0 至 .5turn 的范围内旋转。因此，要得到一个 60% 比率的饼 图，伪元素的代码可能是这样的：
html:
css:
.pie2{
width:140px;
height: 140px;
background: #8BC34A;
border-radius: 50%;
background-image: linear-gradient(to right,transparent 50%,#655 0);
}
.pie2::before{
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background: #655;/*当范围大于50%时,需要改变伪元素的背景颜色为#655;*/
transform-origin: left;
transform: rotate(.1turn);
}
用 CSS 动画来实现一个饼图从 0 变化到 100% 的动画，从而得到一个炫酷的进度指示器：
代码如下：
html:
css:
.pie3 {
width:140px;
height: 140px;
border-radius: 50%;
background: yellowgreen;
background-image: linear-gradient(to right, transparent 50%, currentColor 0);
color: #655;
}
.pie3::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 3s linear infinite, bg 6s step-end infinite;
}
@keyframes spin {
to { transform: rotate(.5turn); }
}
@keyframes bg {
50% { background: currentColor; }
}
本文介绍了如何使用CSS来绘制气泡框，包括矩形框和指示方向的三角形箭头。通过调整元素的border属性，可以在不同浏览器中创建镂空的三角形，同时展示了如何通过CSS3创建不规则形状和优化代码以适应后期维护。此外，还探讨了如何利用CSS3的transform属性实现动态效果，如饼图动画。
扫一扫
938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
