1. 常用border來實現三角形
原理: 寬高都不設置(即為0)，只設置邊框，4個邊框都設置寬度(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;
}
效果如圖
上面看到的都是三角形，其實想實現單個三角形只需把其他三個三角形的border-color設置為透明色就可以了
這樣就實現了三角形
<!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實現toolTip(實心三角箭頭)
原理:
- 一個三角形絕對定位到主體元素邊界處并連接起來
- 把三角形的顏色換成和主體元素一致的背景色就可以
.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實現toolTip(空心三角箭頭)源碼如下
原理:
- 一個邊框顏色的三角形絕對定位到主體元素邊界處并連接起來
- 另一個主體元素背景色的三角形絕對定位并覆蓋到第一個三角形上面
- 第二個三角形相較于第一個三角形定位上偏移距離應等于邊框厚度
.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>
效果圖如下
效果圖
