1. 常用border來(lái)實(shí)現(xiàn)三角形
原理: 寬高都不設(shè)置(即為0)，只設(shè)置邊框，4個(gè)邊框都設(shè)置寬度(border-width)，樣式(border-style)和顏色(border-color)
.test {
width:0;
height: 0;
border-top: 100px solid red ;
border-bottom: 100px solid blue;
border-left: 100px solid green;
border-right: 100px solid yellow;
}
效果如圖
上面看到的都是三角形，其實(shí)想實(shí)現(xiàn)單個(gè)三角形只需把其他三個(gè)三角形的border-color設(shè)置為透明色就可以了
這樣就實(shí)現(xiàn)了三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>各種三角形</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin-top: 50px;
}
.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;
}
</style>
</head>
<body>
<ul>
<li class="triangle-up"></li>
<li class="triangle-down"></li>
<li class="triangle-left"></li>
<li class="triangle-right"></li>
<li class="triangle-topleft"></li>
<li class="triangle-topright"></li>
<li class="triangle-bottomleft"></li>
<li class="triangle-bottomright"></li>
</ul>
</body>
</html>
2.css實(shí)現(xiàn)toolTip(實(shí)心三角箭頭)
原理:
- 一個(gè)三角形絕對(duì)定位到主體元素邊界處并連接起來(lái)
- 把三角形的顏色換成和主體元素一致的背景色就可以
.test {
position: relative;
width: 300px;
height: 100px;
border-radius: 20px;
margin: 100px auto;
background-color: #A5C4EC;
}
.test:before{
content: '';
display: block;
position: absolute;
bottom: -20px;
left: 80px;
border-left: 20px solid transparent ;
border-right: 20px solid transparent;
border-top: 20px solid #A5C4EC;
}
3.css實(shí)現(xiàn)toolTip(空心三角箭頭)源碼如下
原理:
- 一個(gè)邊框顏色的三角形絕對(duì)定位到主體元素邊界處并連接起來(lái)
- 另一個(gè)主體元素背景色的三角形絕對(duì)定位并覆蓋到第一個(gè)三角形上面
- 第二個(gè)三角形相較于第一個(gè)三角形定位上偏移距離應(yīng)等于邊框厚度
.test {
position: relative;
width: 300px;
height: 100px;
border-radius: 20px;
margin: 100px auto;
border: 6px solid blue;
background-color: #A5C4EC;
}
.test:before{
content: '';
display: block;
position: absolute;
bottom: -20px;
left: 80px;
border-left: 20px solid transparent ;
border-right: 20px solid transparent;
border-top: 20px solid blue;
}
.test:after{
content: '';
display: block;
position: absolute;
bottom: -14px;
left: 80px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #fff;
}
title
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 1000px;
margin: 0 auto;
}
/* 向下 */
.toolTip-bottom {
position: relative;
width: 300px;
height: 100px;
border: 1px solid #A5C4EC;
border-radius: 20px;
margin: 100px auto;
background-color: #fff;
}
.toolTip-bottom:before{
content: '';
display: block;
position: absolute;
bottom: -20px;
left: 80px;
border-left: 20px solid transparent ;
border-right: 20px solid transparent;
border-top: 20px solid #A5C4EC;
}
.toolTip-bottom:after{
content: '';
display: block;
position: absolute;
bottom: -17.6px;
left: 80px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #fff;
}
/* 向上 */
.toolTip-top {
position: relative;
width: 300px;
height: 100px;
border: 1px solid #A5C4EC;
border-radius: 20px;
margin: 100px auto;
background-color: #fff;
}
.toolTip-top:before{
content: '';
display: block;
position: absolute;
top: -20px;
left: 80px;
border-left: 20px solid transparent ;
border-right: 20px solid transparent;
border-bottom: 20px solid #A5C4EC;
}
.toolTip-top:after{
content: '';
display: block;
position: absolute;
top: -17.6px;
left: 80px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #fff;
}
/* 向左 */
.toolTip-left {
position: relative;
width: 300px;
height: 100px;
border: 1px solid #A5C4EC;
border-radius: 20px;
margin: 100px auto;
background-color: #fff;
}
.toolTip-left:before {
content: '';
display: block;
position: absolute;
left: -20px;
top: 30px;
border-top: 20px solid transparent ;
border-bottom: 20px solid transparent;
border-right: 20px solid #A5C4EC;
}
.toolTip-left:after {
content: '';
display: block;
position: absolute;
left: -18px;
top: 30px;
border-top: 20px solid transparent ;
border-bottom: 20px solid transparent;
border-right: 20px solid #fff;
}
/* 向右 */
.toolTip-right {
position: relative;
width: 300px;
height: 100px;
border: 1px solid #A5C4EC;
border-radius: 20px;
margin: 100px auto;
background-color: #fff;
}
.toolTip-right:before {
content: '';
display: block;
position: absolute;
right: -20px;
top: 40px;
border-top: 20px solid transparent ;
border-bottom: 20px solid transparent;
border-left: 20px solid #A5C4EC;
}
.toolTip-right:after {
content: '';
display: block;
position: absolute;
right: -18px;
top: 40px;
border-top: 20px solid transparent ;
border-bottom: 20px solid transparent;
border-left: 20px solid #fff;
}
</style>
</head>
<body>
<div class="wrap">
<div class="toolTip-bottom"></div>
<div class="toolTip-top"></div>
<div class="toolTip-left"></div>
<div class="toolTip-right"></div>
</div>
</body>
</html>
效果圖如下
效果圖
