原理其实很简单，只需要先画一个深色的三角形（和border同色），然后再画一个白色的三角形覆盖即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>2.8 画一个有边缘色的三角形</title>
</head>
<style>
.msg {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 10px;
    width: 400px;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
}

.msg:before {
    content: "";
    position: absolute;
    left: -10px;
    top: 34px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 10px solid #ccc;
}
</style>
<body class="home">
    <div class="msg"> h1, 亲 </div>
</body>
</html>


.msg:before {
    content: "";
    position: absolute;
    left: -8px;
    top: 34px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 10px solid #ccc;
}

添加阴影

三角形要有阴影，可以用filter添加阴影效果，记得结合 background:#fff 使用

filter: drop-shadow(0 0 2px #999);
background: #fff;

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>2.8 画一个有边缘色的三角形</title>
</head>
<style>

.msg {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 10px;
    width: 400px;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    filter: drop-shadow(0 0 2px #999);
    background: #fff;
}

.msg:before {
    content: "";
    position: absolute;
    left: -10px;
    top: 34px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 10px solid #ccc;
}

.msg:after {
    content: "";
    position: absolute;
    left: -8px;
    top: 34px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 10px solid #fff;
}

</style>
<body class="home">
<div class="msg"> h1, 亲 </div>
</body>
</html>

results matching ""

    No results matching ""