0
Ich habe ein Design wie in Bild unten versucht.Wie man Textinhalt in div setzt
Alles außer einem kleinen Teil getan hat. Sie können den Text "bester Wert" in der oberen rechten Ecke sehen. Der Text überlappte das Element.
Wenn ich mit inspect-Element überprüfe, zeigt das Ergebnis wie in der folgenden Abbildung.
Wie den Text in dieser .triangle-skewed Klasse erhalten. Vielen Dank im Voraus.
.selected {
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
background: #00ADEF;
text-align:center;
text-transform: uppercase;
}
.selected .plan-title {
background: #f47129;
border-bottom: 1px solid #fff;
padding: 6px 2px 6px 2px;
position: relative;
}
.selected .plan-title h1 {
color: #fff;
margin-top: 13px;
margin-bottom: 12px;
font-size: 40px;
font-weight: 400;
}
.selected .plan-title .triangle-skewed {
border-left: 100px solid transparent;
border-right: 0px solid transparent;
border-top: 80px solid #000000;
border-bottom: transparent;
position: absolute;
top: 0;
width: 0;
height: 0;
right: 0;
}
.selected .plan-title .triangle-skewed p {
color: #fff;
font-size: 14px;
}
.selected .plan-content {
background: #00ADEF;
}
.selected .plan-content .h1-powof {
font-weight: 400;
font-size: 74px;
color: #fff;
}
.selected .plan-content .h1-powof span {
font-weight: 500;
font-size: 40px;
color: #fff;
vertical-align: top;
margin-right: 2px;
margin-top: 12px;
display: inline-block;
}
.selected .plan-content .month {
color: #050505;
font-weight: 400;
font-size: 23px;
}
.selected .plan-content .content-p {
color: #050505;
font-weight: 400;
font-size: 14px;
}
.selected .plan-content .content-p span {
color: #fff;
}
.selected .plan-content .content-p-margin {
color: #050505;
font-weight: 400;
margin-bottom: 9px;
font-size: 14px;
}
.selected .plan-content .content-p-margin span {
color: #fff;
}
.selected .plan-content .content-p-shipping {
color: #050505;
font-weight: 400;
font-size: 23px;
padding-top: 8%;
}
.selected .plan-content .content-p-shipping-no-space {
color: #050505;
font-weight: 400;
font-size: 23px;
padding-top: 3px;
}
.selected .plan-content .pick-btn {
text-transform: uppercase;
margin-bottom: 3%;
background: #f47129;
border-radius: 4px;
width: 80%;
color: #fff;
border: none;
font-weight: 400;
font-size: 24px;
padding: 12px 10px 12px 10px;
box-shadow: 0px 0px 1px 0px #050505;
transition: .2s;
}
.selected .plan-content .pick-btn:hover {
transform: scale(1.06);
}<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 plans">
<div class="plan-box selected">
<div class="plan-title">
<h1>ruby</h1>
<div class="triangle-skewed">
<p>best value</p>
</div>
</div>
<div class="plan-content">
<h1 class="h1-powof"><span>$</span>49</h1>
<p class="month">per month</p>
<p class="content-p">4x 15ml bottles of ejuice</p>
<p class="content-p">guaranteed 60ml of ejuice</p>
<p class="content-p">1 pack <span>royal wires by dryx</span></p>
<p class="content-p">$66 retail value</p>
<p class="content-p-shipping">free shipping</p>
<button class="pick-btn">this plan is selected</button>
</div>
</div>
</div>
haben Sie versucht, mit Z-Index? Es wird das Element aus dem "schwarzen Dreieck" -Element schieben. – ZombieChowder