转：纯CSS圆角箭头三角形多边形 — CSS border的运用

最新推荐文章于 2022-08-05 18:29:58 发布

杰欧奕

最新推荐文章于 2022-08-05 18:29:58 发布

阅读量193

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/ylz4647/article/details/84239180

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

To 原创作者，由于资料是早期收藏，原始地址已丢失，请见谅！

<!DOCTYPE html>

<html>

<head>

<title>纯CSS圆角箭头三角形多边形 — CSS border的运用</title>

#demo1{position: relative;margin: 50px;width: 200px;}

#demo1 s{position: absolute;right:20px;bottom:-30px;width: 0;height: 0;overflow: hidden;border-color: #6cf #6cf transparent transparent;border-width: 15px;border-style:solid solid dashed dashed ;}

#demo1 b{position: absolute;right:20px;bottom:-30px;width: 0;height: 0;overflow: hidden;border-color: #fff #fff transparent transparent;border-width: 15px 5px;border-style: solid solid dashed dashed;}

.rc_top{height: 0;overflow: hidden;border-color: transparent transparent #6cf;border-width: 3px;border-style: dashed dashed solid;border-top: 0;}

.rc_btm{height: 0;overflow: hidden;border-color: #6cf transparent transparent;border-width: 3px;border-style: solid dashed dashed;border-bottom: 0;}

.rc_bd{height: 100px;padding: 10px;background: #6cf;color: #333;}

#demo2{width: 0;height: 0;margin: 60px;border-color: transparent transparent #f60;border-style: dashed dashed solid;border-width: 0 30px 50px 120px;}

#demo3{margin: 60px;}

#demo3 s{display: block;width: 86px;height: 0;overflow: hidden;border-color: transparent transparent #c6f;border-style: dashed dashed solid;border-width: 0 50px 86px; }

#demo3 b{display: block;width: 86px;height: 0;overflow: hidden;border-color:#c6f transparent transparent ;border-style: solid dashed dashed;border-width: 86px 50px 0; }

</style>

</head>

<body>

锦瑟无端五十弦

</div>

<s></s>

<b></b>

</div>

</div>

<s></s>

<b></b>

</div>

</body>

</html>

杰欧奕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
转：纯CSS圆角箭头三角形多边形 — CSS border的运用

To 原创作者，由于资料是早期收藏，原始地址已丢失，请见谅！&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;纯CSS圆角箭头三角形多边形 —
复制链接

扫一扫