CSS邊框作圖
阿新 • • 發佈：2018-07-13
shu ofo eat 對話 顯示 char row otto info
原文
簡書原文：https://www.jianshu.com/p/537a878304f2
大綱
1、border-style的值
2、利用border作圖——基本圖形
3、利用border作圖——特殊圖形
1、border-style的值
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>inline-block</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
margin:100px auto;
}
</style>
<link rel="stylesheet" href="styles.css" type="text/css"/>
</head>
<body>
<div>
</div>
</body>
</html>
div{
width:100px;
height:100px;
border:20px green;
border-style:solid;
}
不同的border-style的值獲得的效果是不同的
1.1、solid：定義實線
1.2、double：定義雙線，雙線的寬度等於 border-width 的值
1.3、dotted：定義點狀邊框，在大多數瀏覽器中呈現為實線
1.4、dashed：定義虛線，在大多數瀏覽器中呈現為實線
1.5、groove：定義 3D 凹槽邊框，其效果取決於 border-color 的值
1.6、ridge：定義 3D 壟狀邊框，其效果取決於 border-color 的值
1.7、inset：定義 3D inset 邊框，其效果取決於 border-color 的值
1.8、outset：定義 3D outset 邊框，其效果取決於 border-color 的值
2、利用border作圖——基本圖形
基本的html文件，基本圖形在這個html中的div上創造
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>inline-block</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
margin:100px auto;
}
</style>
<link rel="stylesheet" href="styles.css" type="text/css"/>
</head>
<body>
<div>
</div>
</body>
</html>
2.1、給不同的邊框設置不同的顏色
div{
width:100px;
height:100px;
border-top:100px solid red;
border-bottom:100px solid orange;
border-left:100px solid green;
border-right:100px solid blue;
}
2.2、將DIV的寬高設置為0
div{
width:0;
height:0;
border-top:100px solid red;
border-bottom:100px solid orange;
border-left:100px solid green;
border-right:100px solid blue;
}
2.3、梯形
div{
width:100px;
height:0;
font-size:0;
line-height:0;
overflow:hidden;
border-bottom:100px solid orange;
border-left:100px dashed transparent;
border-right:100px dashed transparent;
}
2.4、三角形
/*
切記高度和寬度都要設置為0，通過邊框的width來控制三角形的大小
通過調整不同方向的邊框顯示顏色和鄰近的邊框的透明可以得到不同方向上的等腰三角形
或者
可以設置兩個鄰近邊框，一個顯示顏色一個不顯示顏色從而形成不同方向上的直角三角形
*/
/*等腰三角形*/
div{
width:0;
height:0;
font-size:0;
line-height:0;
overflow:hidden;
border-bottom:100px solid orange;
border-left:100px dashed transparent;
border-right:100px dashed transparent;
}
/*直角三角形*/
div{
width:0;
height:0;
font-size:0;
line-height:0;
overflow:hidden;
border-bottom:100px solid orange;
border-left:100px dashed transparent;
}
3、利用border作圖——特殊圖形
3.1、疊加三角形
<div class=box>
<span class="arrow_1"></span>
<span class="arrow_2"></span>
</div>
<!--
設置不同方向的兩個三角形從而疊加出不同方向的三角形箭頭
-->
.box{
position:relative;
}
.box span{
width:0;
height:0;
font-size:0;
line-height:0;
overflow:hidden;
position:absolute;
}
span.arrow_1{
border-top:20px solid #beceeb;
border-left:20px dashed transparent;
border-right:20px dashed transparent;
left:80px;
bottom:-20px;
z-index:1;
}
span.arrow_2{
border-top:20px solid #ffffff;
border-left:20px dashed transparent;
border-right:20px dashed transparent;
left:80px;
bottom:-13px;
z-index:2;
}
3.2、疊加兩個相反方向的三角形
<div class="triangle-updown"> </div>
.triangle-updown {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #669;
position: relative;
margin-bottom: 50px
}
.triangle-updown:after {
content: " ";
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #669;
position: absolute;
top: 50px;
left: -50px;
}
3.3、利用橢圓形的疊加形成心形
.heart {
width: 160px;
height: 200px;
position: relative
}
.heart:before {
content: " ";
border: 0 solid transparent;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px 100px 0 0;
width: 80px;
height: 120px;
background: #669;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
position: absolute;
left: 20px;
}
.heart:after {
content: " ";
border: 0 solid transparent;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px 100px 0 0;
width: 80px;
height: 120px;
background: #669;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
position: absolute;
left: 48px;
top: 0px;
}
3.4、橢圓提示泡
.oval-pop {
width: 200px;
height: 100px;
background: #669;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
margin-bottom: 50px;
position: relative
}
.oval-pop:after {
content: "";
border: 0 solid transparent;
border-bottom: 30px solid #669;
-moz-border-radius: 0 0 0 200px;
-webkit-border-radius: 0 0 0 200px;
border-radius: 0 0 0 200px;
width: 50px;
height: 50px;
position: relative;
margin-top: 20px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
position: absolute;
top: 50px;
left: 20px
}
3.5、對話框1
<div class=box>
<span class="arrow_1"></span>
<span class="arrow_2"></span>
hellos
</div>
.box{
width:300px;
padding:30px 20px;
border:5px solid #beceeb;
position:relative;
}
.box span{
width:0;
height:0;
font-size:0;
line-height:0;
overflow:hidden;
position:absolute;
}
span.arrow_1{
border-top:20px solid #beceeb;
border-left:20px dashed transparent;
border-right:20px dashed transparent;
left:80px;
bottom:-20px;
z-index:1;
}
span.arrow_2{
border-top:20px solid #ffffff;
border-left:20px dashed transparent;
border-right:20px dashed transparent;
left:80px;
bottom:-13px;
z-index:2;
}
3.6、對話框2——偽類
<div class=box>
<span>hellos</span>
</div>
.box{
width:300px;
padding:30px 20px;
border:5px solid #beceeb;
position:relative;
}
.box:after,.box:before{
content:‘‘;
width:0;
height:0;
font-size:0;
line-height:0;
overflow:hidden;
position:absolute;
}
.box:after{
border-top:20px solid #beceeb;
border-left:20px dashed transparent;
border-right:20px dashed transparent;
left:80px;
bottom:-20px;
z-index:1;
}
.box:before{
border-top:20px solid #ffffff;
border-left:20px dashed transparent;
border-right:20px dashed transparent;
left:80px;
bottom:-13px;
z-index:2;
}
參考網址
https://www.cnblogs.com/wanghuih/p/5836635.html
http://www.cnblogs.com/pigtail/archive/2013/02/17/2914119.html
https://www.w3cplus.com/css/create-shapes-with-css
CSS邊框作圖