页面中三角和气泡窗口的写法

最新推荐文章于 2024-06-13 20:01:35 发布

原创最新推荐文章于 2024-06-13 20:01:35 发布 · 292 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨了CSS样式设计与布局的关键技巧，通过详细解释并应用容器、箭头等元素，展示了如何创建美观且响应式的网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.container{margin:50px auto; width: 800px; text-align: center;background: #ccc;} //大的轮廓div

.con-arrow{ //内层div

position: relative;

background: #88b7d5;
padding: 40px;
width: 280px;
height: 100px;
border-radius: 10px;}
.con-arrow:after{
position: absolute;
right: 100%;
top:50%;
margin-top: -15px;
content: '';
border:30px solid;
border-color:transparent #88b7d5 transparent transparent ;
}
</head>
<body>

<div class="container"> //外层div
<div class="con-arrow">asdf</div> //内层窗口div
</div>