शुद्ध सीएसएस

Question

के साथ बहुभुज बटन मुझे एक बहुभुज बटन को कोड करने की आवश्यकता है जिसमें शुद्ध सीएसएस और एचटीएमएल के साथ रूपरेखा है। मेरे पास अभी यही है लेकिन मैं यह नहीं समझ सकता कि रूपरेखा कैसे जोड़नी है। आईई में भी इसे समर्थित करने की आवश्यकता है। मैं यह कैसे करु?

/**** CSS ***/ 
 

 
#statement .polygon { 
 
    width: 290px; 
 
    height: 75px; 
 
    background: #590f20; 
 
    position: relative; 
 
    color: #F94141; 
 
    text-align: center; 
 
    font-size: 1.8em; 
 
    line-height: 2.9em; 
 
    font-weight: 400; 
 
    text-transform: uppercase; 
 
    margin-top: 50px; 
 
    margin-bottom: 35px; 
 
} 
 
#statement .bottom:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: -50px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 25px solid transparent; 
 
    border-right: 25px solid #590f20; 
 
    border-bottom: 37.5px solid transparent; 
 
} 
 
#statement .bottom:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 290px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 25px solid #590f20; 
 
    border-right: 25px solid transparent; 
 
    border-bottom: 37.5px solid transparent; 
 
} 
 
#statement .top:before { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 37.5px; 
 
    left: -50px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 25px solid transparent; 
 
    border-right: 25px solid #590f20; 
 
    border-top: 37.5px solid transparent; 
 
} 
 
#statement .top:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: 37.5px; 
 
    left: 290px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 25px solid #590f20; 
 
    border-right: 25px solid transparent; 
 
    border-top: 37.5px solid transparent; 
 
}

<div id="statement"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-8 col-md-offset-2"> 
 
     <div class="heading"> 
 
      <h1></h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!-- /.row --> 
 
    <div class="row"> 
 
     <div class="col-md-3 col-md-offset-4-5"> 
 
     <a class="button" href="#button"> 
 
      <div class="polygon bottom top"> 
 
      Work With Us 
 
      </div> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- /.containter --> 
 
</div> 
 
<!-- /#statement -->

Answer 1

आप एक सीएसएस क्लिप-पथ बहुभुज का उपयोग कर कोशिश कर सकते हैं और फिर एक सीमा प्राप्त करने के लिए एक और div जोड़ें।

#statement .polygon .outer { 
 
    display: inline-block; 
 
    width: 290px; 
 
    height: 75px; 
 
    background: #590f20; 
 
    position: relative; 
 
    color: #F94141; 
 
    text-align: center; 
 
    font-size: 1.8em; 
 
    line-height: 2.9em; 
 
    font-weight: 400; 
 
    text-transform: uppercase; 
 
    -webkit-clip-path: polygon(30px 80px, 0px 50%, 30px 0px, 260px 0px, 290px 50%, 260px 80px); 
 
    clip-path: polygon(30px 80px, 0px 50%, 30px 0px, 260px 0px, 290px 50%, 260px 80px); 
 
    -webkit-transform: scale(0.98, 0.95); 
 
    transform: scale(0.98, 0.95); 
 
} 
 
#statement .polygon.border { 
 
    -webkit-clip-path: polygon(30px 80px, 0px 50%, 30px 0px, 260px 0px, 290px 50%, 260px 80px); 
 
    clip-path: polygon(30px 80px, 0px 50%, 30px 0px, 260px 0px, 290px 50%, 260px 80px); 
 
    background-color: orange; 
 
}

<div id="statement"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-8 col-md-offset-2"> 
 
     <div class="heading"> 
 
      <h1></h1> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!-- /.row --> 
 
    <div class="row"> 
 
     <div class="col-md-3 col-md-offset-4-5"> 
 
     <a class="button" href="#button"> 
 
      <div class="polygon border"> 
 
      <span class="outer"> 
 
          Work With Us 
 
         </span> 
 
      </div> 
 
     </a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <!-- /.containter --> 
 
</div> 
 
<!-- /#statement -->

Answer 2

जबकि एसवीजी यहाँ एक विकल्प हो सकता है, मैं एक सीएसएस संस्करण जोड़ने (है)। यहाँ एक त्वरित प्रदर्शन है, जो एक निश्चित ऊंचाई लेकिन परिवर्तनीय चौड़ाई का उपयोग कर रहा है:

div { 
 
    margin: 50px; 
 
    height: 50px; 
 
    min-width: 100px; 
 
    background: lightgray; 
 
    position: relative; 
 
    display: inline-block; 
 
    border-top: 5px solid gold; 
 
    border-bottom: 5px solid gold; 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    line-height: 50px; 
 
    cursor:pointer; 
 
} 
 
div:before, 
 
div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -5px; 
 
    height: 37px; 
 
    width: 37px; 
 
    background: inherit; 
 
    transform: rotate(45deg); 
 
    transform-origin: top left; 
 
} 
 
div:before { 
 
    left: 0; 
 
    border-left: 5px solid gold; 
 
    border-bottom: 5px solid gold; 
 
} 
 
div:after { 
 
    left: 100%; 
 
    border-top: 5px solid gold; 
 
    border-right: 5px solid gold; 
 
} 
 
/*demo only*/ 
 

 
html {background: #222;}

<div>SOME TEXT</div>