CSS 实现箭头

最新推荐文章于 2023-05-06 21:32:02 发布

十三浪

最新推荐文章于 2023-05-06 21:32:02 发布

阅读量683

点赞数

分类专栏：前端技巧 CSS学习指南文章标签： div+css

本文链接：https://blog.csdn.net/alanzhuhaihua/article/details/15809679

版权

前端技巧同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

CSS学习指南

13 篇文章 0 订阅

订阅专栏

相对来说CSS 实现箭头产生的效果简单一点，根据需要来安排。

毕竟有些效果是CSS 无法实现的那就直接切图吧！

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三角形叠加</title>
<style type="text/css">

.contentbox {
   border: 1px solid rgb(28, 126, 207);
   position: absolute;
   background-color: rgb(255, 255, 255);
   width: 100%;
   height: 100%;
   padding: 5px;
   box-shadow: 3px 3px 4px rgb(153, 153, 153);
   left: 5px;
   border-radius: 3px 3px 3px 3px;
}
</style>
</head>
<body>
<div class="pos_rel"> <span class="icon1"><span class="icon2"></span></span>
    <div class="contentbox"> … </div>
</div>
</body>
</html>