Membuat Border Melengkung

Biasanya kan border itu bentuk nya kotak tuh, nah kali ini saya akan share cara membuat border itu melengkung. Walaupun agak ribet, tapi gak apa lah, yang penting bisa nambah ilmu kalian.

Ok, begini caranya

• Yang pertama, kamu sisipin kode ini ke dalam CSS mu.

  #ghany {
  margin-left: 2px;
  margin-right: 2px;
  }
  .xtop, .xbottom {
  display : block;
  background : transparent;
  font-size : 1px;
  }
  
  .xbcontent {
  display : block;
  padding : 5px 10px;
  }
  
  .xb1, .xb2, .xb3, .xb4 {
  display : block;
  overflow : hidden;
  }
  
  .xb1, .xb2, .xb3 {
  height : 1px;
  }
  
  .xb2, .xb3, .xb4, .xbcontent {
  border-left : solid 1px #000;
  border-right : solid 1px #000;
  background : #fff;
  }
  
  .xb1 {
  margin : 0 5px;
  background : #000;
  }
  
  .xb2 {
  margin : 0 3px;
  border-width : 0 2px;
  }
  
  .xb3 {
  margin : 0 2px;
  }
  
  .xb4 {
  height : 2px;
  margin : 0 1px;
  }

• Yang kedua, kamu pasang kode ini di menu wap mu.

  <div id="ghany">
  <p class="xtop">
  <p class="xb1"></p>
  <p class="xb2"></p>
  <p class="xb3"></p>
  <p class="xb4"></p>
  </p>
  <div class="xbcontent">
  Ganteng banget kang ghany ini :D
  </div>
  <p class="xbottom">
  <p class="xb4"></p>
  <p class="xb3"></p>
  <p class="xb2"></p>
  <p class="xb1"></p>
  </p></div>

contoh class nya bisa dilihat di wap mu masing-masing.

Related Posts:

Tweet