首页 > html > bubble > Page Widget - 如何创建CSS3具有圆形边框的气泡

Page Widget - 如何创建CSS3具有圆形边框的气泡

bubble 【bubble】
我们想知道如何创建CSS3具有圆形边框的气泡。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.bubble {
    margin: 50px;
    padding: 50px;
    position: relative;
    border-radius: 0.5em;
}
.bubble:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50px;
    border-top: 20px solid blue;
    border-top-color: inherit; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent; 
}
  </style>
</head>
<body>
  <div class="bubble" style="background: green; border-color: green;">test</div>
</body>
</html>