मुझे एक तत्व पर कोण बनाने के कई तरीके मिल गए हैं, लेकिन मैं जो हासिल करने की कोशिश कर रहा हूं वह पारदर्शिता रखते हुए उन कोनों को रखने की क्षमता है। मैं इसे सरल और विशुद्ध रूप से css (या कम) और html में रखने की कोशिश कर रहा हूँ।

मेरे पास जो कुछ है उसकी एक वर्तमान कार्यशील प्रति नीचे है, यह स्पष्ट रूप से बेवल के कारण किनारों को ओवरलैप करने के लिए सफेद घुमाए गए बक्से का उपयोग कर रहा है।

एक और तरीका जो मैंने नोट किया था, एक कोने को प्रभावित करने के लिए रैखिक ग्रेडिएंट linear-gradient(-220deg, transparent 10px, #ad1c1c 10px); का उपयोग कर रहा था, इससे पारदर्शिता की अनुमति मिलती है, लेकिन मैं शीर्ष बाएं और शीर्ष दाएं दोनों कोनों पर लागू होने के साथ एक सरल उदाहरण बनाने में सक्षम नहीं हूं।

h1 {
  position: relative;
  width: 500px;
  background: #ad1c1c;
  color: #fff;
  font: bold 25px/35px 'Lucida sans';
  height: 35px;
  padding: 0 30px;
  display: inline-block;
}

.title {
  text-align: center;
}

.bevel::before,
.bevel::after {
  position: absolute;
  background: #fff;
  content: " ";
  display: block;
  height: 30px;
  width: 30px;
}

.bevel::before {
  left: -20px;
  top: -20px;
  transform: rotate(-135deg);
}

.bevel::after {
  right: -20px;
  top: -20px;
  transform: rotate(-45deg);
}
<div class="title">
  <h1 class="bevel">Test</h1>
</div>
3
LimpingNinja 16 फरवरी 2019, 16:08

1 उत्तर

सबसे बढ़िया उत्तर

आप इसे प्राप्त करने के लिए कई पृष्ठभूमि पर विचार कर सकते हैं और आप अपने linear-gradient(-220deg, transparent 10px, #ad1c1c 10px) के साथ लगभग अच्छे हैं। बस आकार और स्थिति समायोजित करें:

h1 {
  color: #fff;
  text-align: center;
  padding:10px;
  background:
    linear-gradient(-225deg,transparent 10px,#ad1c1c 0) left /50.5% 100%,
    linear-gradient( 225deg,transparent 10px,#ad1c1c 0) right/50.5% 100%;
  background-repeat:no-repeat;
}

body {
 background:pink;
}
<h1 >Test</h1>

और सीएसएस चर के साथ आकार को बेहतर ढंग से नियंत्रित करने के लिए:

h1 {
  --s:10px;
  color: #fff;
  text-align: center;
  padding:10px;
  background:
    linear-gradient(-225deg,transparent var(--s),#ad1c1c 0) left /50.5% 100%,
    linear-gradient( 225deg,transparent var(--s),#ad1c1c 0) right/50.5% 100%;
  background-repeat:no-repeat;
}

body {
 background:pink;
}
<h1 >Test</h1>

<h1 style="--s:20px">Test</h1>


<h1 style="--s:30px">Test</h1>

यहाँ तिरछा और छद्म तत्वों पर विचार करने का एक और विचार है:

h1 {
  color: #fff;
  text-align: center;
  padding:0 20px;
  background: #ad1c1c content-box;
  position:relative;
  overflow:hidden;
}
h1:before,
h1:after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:20px;
  background:#ad1c1c;
}
h1:before {
  right:0;
  transform-origin:left;
  transform:skewY(45deg);
}

h1:after {
  left:0;
  transform-origin:right;
  transform: skewY(-45deg);
}

body {
 background:pink;
}
<h1 class="bevel">Test</h1>
2
Temani Afif 16 फरवरी 2019, 14:06