像Instagram Stories一样的边界半径

Question

如何获得像Instagram Stories一样的边界半径？

我试试这个，但不一样

padding: 10px 10px; 
background: rgba(192,192,192,0.6);
border-radius: 27px;

我想要这个：instagram stories

谢谢♥

Answer 1

有些像这样：

    .stories {
      width: 280px;
      height: 520px;
      background: url("http://i.imgur.com/H6YM808.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      overflow: hidden;
    }
    
    .content {
      font-family: arial;
      font-weight: bolder;
      font-size: 1.8em;
      color: white;
      letter-spacing: -0.5px;
    }
    
    .text {
      position: relative;
      margin: 0 auto;
      border-radius: 7px;
      padding: 5px;
      background: rgba(255, 255, 255, 0.7);
      display: table;
      text-align: center;
    }
    
    .a {
      margin-top: 334px;
    }
    
    .b {
      width: 128px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    
    .c-t-left,
    .c-t-right,
    .c-t-left:before,
    .c-t-right:before,
    .c-t-left:after,
    .c-t-right:after {
      position: absolute;
      top: 0;
      content: "";
    }
    
    .c-t-left {
      border-top: 7px solid rgba(255, 255, 255, 0.7);
      border-bottom: 0 solid;
      border-left: 7px solid transparent;
      border-right: 0 solid;
      left: -7px;
    }
    
    .c-t-left:before {
      border-top: 3px solid #bcbfc3;
      border-bottom: 0 solid;
      border-left: 7px solid transparent;
      border-right: 0 solid;
      left: -11px;
      top: -8px;
    }
    
    .c-t-left:after {
      border-top: 7px solid #bcbfc3;
      border-bottom: 0 solid;
      border-left: 3px solid transparent;
      border-right: 0 solid;
      left: -2px;
      top: -3px;
    }
    
    .c-t-right {
      border-top: 7px solid rgba(255, 255, 255, 0.7);
      border-bottom: 0 solid;
      border-left: 0 solid;
      border-right: 7px solid transparent;
      right: -7px;
    }
    
    .c-t-right:before {
      border-top: 3px solid #bcbfc3;
      border-bottom: 0 solid;
      border-right: 7px solid transparent;
      border-left: 0 solid;
      right: -11px;
      top: -8px;
    }
    
    .c-t-right:after {
      border-top: 7px solid #bcbfc3;
      border-bottom: 0 solid;
      border-right: 3px solid transparent;
      border-left: 0 solid;
      right: -2px;
      top: -2px;
    }

  <div class="stories">
    <div class="content">
      <div class="text a">Hi stackoverflow!
        <div></div>
      </div>
      <div class="text b"><span>This is an example</span>
        <div class="c-t-left"></div>
        <div class="c-t-right"></div>
      </div>
    </div>
  </div>