代码改变世界

css3效果连续半圆形

2016-12-16 14:21  孤独大兔子  阅读(235)  评论(0)    收藏  举报 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
  .main{
    height:30px;
    background-color:#F39B00;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
  }
    .stamp {
      height:8px;
      background: radial-gradient(transparent 0, transparent 5px, #F39B00 5px);
      background-size: 12px 12px;
      background-position: 0px 13px;
    }
  </style>
</head>
<body>

  <div class="main">
    <p>XXXXXX</p>
  </div>
  <div class="stamp"></div>

</body>
</html>