本文已参与「新人创作礼」活动，一起开启掘金创作之路。
1. 绘制三角形
其实三角形不难，只有我们把所有边框的颜色设置为 transparent ，然后你想要什么样的三角形，就把哪一边的颜色设置为想要的颜色即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角形</title>
</head>
<style>
.triangle {
margin: 40px auto;
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: pink;
}
</style>
<body>
<div class="triangle"></div>
</body>
</html>
.triangle {
border-bottom-color: pink;
}
2. 气泡框
像这种气泡框，在项目中有时会使用到，这种可以使用伪元素来处理，看下面的代码吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.box {
width: 200px;
height: 50px;
border-radius: 5px;
background-color: #f90;
color: #fff;
font-size: 18px;
text-align: center;
line-height: 50px;
position: relative;
}
.box::after {
content: "";
border: 5px transparent solid;
border-left-color: #f90;
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 100%;
margin-top: -5px;
}
</style>
<body>
<div class="box">iCSS</div>
</body>
</html>
伪元素加上绝对定位来实现，小三角的位置可以随便变换，只要改变 bordeer-top-color 位置和绝对定位的位置即可
.box::after {
content: "";
border: 5px transparent solid;
border-top-color: #f90;
width: 0;
height: 0;
position: absolute;
left: 50%;
top: 100%;
margin-bottom: -5px;
}
3. 高亮按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {
margin: 200px auto;
text-decoration: none;
color: white;
display: inline-block;
width: 68px;
height: 32px;
text-align: center;
line-height: 32px;
background: gray;
border: 1px solid black;
font-size: 18px;
box-shadow: 3px 2px 2px black;
transition:800ms;
border-radius: 5px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
a:hover {
color: black;
background-color: white;
}
</style>
</head>
<body>
<!--按钮高亮-->
<a href="javascrip:;" class="box-btn">Home</a>
</body>
</html>
4. 炫酷按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background: #1A1E23;
}
.btn {
--hue: 190;
position: relative;
padding: 1rem 3rem;
font-size: 1rem;
line-height: 1.5;
color: white;
text-decoration: none;
text-transform: uppercase;
background-color: hsl(var(--hue), 100%, 41%);
border: 1px solid hsl(var(--hue), 100%, 41%);
outline: transparent;
overflow: hidden;
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: 0.25s;
}
.btn:hover {
background: hsl(var(--hue), 100%, 31%);
}
.btn-primary {
--hue: 187;
}
.btn-ghost {
color: hsl(var(--hue), 100%, 41%);
background-color: transparent;
border-color: hsl(var(--hue), 100%, 41%);
}
.btn:hover {
color: white;
}
.btn-shine {
color: white;
}
.btn::before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
hsla(var(--hue), 100%, 41%, 0.5),
transparent
);
transform: translateX(-100%);
transition: 0.6s;
}
.btn:hover {
background: transparent;
box-shadow: 0 0 20px 10px hsla(var(--hue), 100%, 41%, 0.5);
}
.btn:hover::before {
transform: translateX(100%);
}
</style>
</head>
<body>
<button class="btn btn-primary btn-ghost btn-shine">
hover me
</button>
</body>
</html>
