2017-12-23 142 views
5

मैं छद्म तत्वों के साथ एक त्रिकोण आकार बनाने की कोशिश कर रहा हूं। नीचे की छवि में से एक की तरह। enter image description hereछद्म तत्वों के साथ एचटीएमएल/सीएसएस त्रिभुज

लेकिन मुझे यही मिलता है। enter image description here

यहां मैंने यह कोशिश की है।

.container .form--container:before { 
    content: ""; 
    position: absolute; 
    top: 0px; 
    left: 130px; 
    width: 28px; 
    height: 28px; 
    transform: translate(-1rem, -100%); 
    border-left: 1.5rem solid #979797; 
    border-right: 1.5rem solid #979797; 
    border-bottom: 1.5rem solid white; 
} 

उत्तर

6

समस्या सीमा के उपयोग के साथ है। आप इस लिंक को How do CSS triangles work? देख सकते हैं और आप समझेंगे कि सीमा कैसे काम करती है और आपको यह आउटपुट क्यों मिलता है।

एक वैकल्पिक समाधान रोटेशन और सीमा इस तरह उपयोग करने के लिए है:

.box { 
 
    border: 1px solid; 
 
    margin: 50px; 
 
    height: 50px; 
 
    position:relative; 
 
    background: #f2f2f5; 
 
} 
 

 
.box:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-top: 1px solid; 
 
    border-left: 1px solid; 
 
    top: -11px; 
 
    left: 13px; 
 
    background: #f2f2f5; 
 
    transform: rotate(45deg); 
 
}
<div class="box"> 
 

 
</div>

और मामले में आप तीर के साथ अपने बॉक्स पारदर्शी होना चाहते हैं, यहाँ एक और है इसे प्राप्त करने के लिए चाल (जैसा उपर्युक्त समाधान पृष्ठभूमि के रूप में ठोस रंग पर विचार करता है):

body { 
 
margin:0; 
 
background-image:linear-gradient(to right,yellow,pink); 
 
} 
 

 
.box { 
 
    border: 1px solid; 
 
    border-top:transparent; /*make border-top transparent*/ 
 
    margin: 50px; 
 
    height: 50px; 
 
    position:relative; 
 
} 
 

 
.box:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-top: 1px solid ; 
 
    border-left: 1px solid; 
 
    top: -11px; 
 
    left: 13px; 
 
    transform: rotate(45deg); 
 
} 
 
/* Use after element to mimic the border top with a gap using linear gradient*/ 
 
.box:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left:0; 
 
    right:0; 
 
    height: 1px; 
 
    background-image:linear-gradient(to right,black 10px,transparent 10px,transparent 39px,black 39px); 
 
}
<div class="box"> 
 

 
</div>

संबंधित मुद्दे