0
以下のようにデザインを試しました。divにテキストコンテンツを入れる方法
それはすべて一つの小さな一部を除いて行われています。右上に「最高の価値」のテキストが表示されます。テキストが要素と重なっていました。
私は次のイメージのように要素の結果を表示するとチェックします。その.triangle-skewedクラスにテキストを取得する方法
。 ありがとうございます。
.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>
を試してみてくださいあなたが使用して試してみましたZ-インデックス？それは "黒い三角形"要素から要素を押し出すでしょう。 – ZombieChowder