border-radius常见图形绘制效果举例实例页面

展示

代码

• HTML：

  <h4>1/4圆-角标-出版顺序</h4>
  <ol class="ranking">
      <li>CSS世界</li>
      <li>CSS选择器世界</li>
      <li>CSS新世界</li>
  </ol>
  
  <h4>对话框小尾巴</h4>
  <div class="talk-dialog">使用border边框配合border-radius圆角效果实现。</div>

• CSS：

  .ranking {
      list-style-type: none;
      margin: 0;
      padding: 0;
      border: 1px solid lightgray;
      counter-reset: bookrank;
  }
  .ranking li {
      padding: 10px 20px;
      position: relative;
  }
  .ranking li:not(:last-child) {
      border-bottom: 1px solid #eee;
  }
  .ranking li::before {
      content: counter(bookrank);
      counter-increment: bookrank;
      width: 20px; height: 20px;
      position: absolute; top: 0; left: 0;
      background: deepskyblue;
      color: #fff;
      font-size: 12px;
      text-indent: 4px;
      border-bottom-right-radius: 100%;
  }
  
  
  .corner-marker {
      border-bottom-right-radius: 100%;
  }
  
  .talk-dialog {
      padding: 10px;
      background: deepskyblue;
      border-radius: .5em;
      color: #fff;
      position: relative;
      z-index: 0;
  }
  .talk-dialog::before {
      content: "";
      position: absolute;
      width: 15px; height: 10px;
      color: deepskyblue;
      border-top: 10px solid;
      border-top-left-radius: 80%;
      left: 0; bottom: 0;
      margin-left: -12px;
      -ms-transform: skewX(-30deg) scaleY(1.3);
      transform: skewX(-30deg) scaleY(1.3);
      z-index: -1;
  }