編碼的世界 / 優質文選 / 生涯
用css3制作一個帶小尖角的氣泡對話框
2022年3月16日
-
感謝css3的技術發展，現在一些純形狀類的圖像可以不用切成一張圖片，而是可以用css3來繪制出一樣的圖形。
因為這是我第一天上班主管給我的小任務，所以對它有點小感情，想要把它寫在博客上。
1、矩形對話框 2、用三角形做小尖角完整代碼如下
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
</head>
<style type="text/css">
.frame{
width: 200px;
height: 50px;
border:1px solid #000;
border-radius: 10px;
position: relative;
}
.triangle{
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
bottom: -12px;
right: 30px;
background-color: #fff;
border-top: 1px solid #000;
border-left: 1px solid #000;
transform:rotate(225deg);
-ms-transform:rotate(225deg); /* IE 9 */
-moz-transform:rotate(225deg); /* Firefox */
-webkit-transform:rotate(225deg); /* Safari 和 Chrome */
-o-transform:rotate(225deg); /* Opera */
}
</style>
<body>
<div class="frame">
<span class="triangle"></span>
</div>
</body>
</html>熱門文章
