如何将文本内容放入div
问题描述：
我试过了下图中的设计。如何将文本内容放入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>
答
您必须使用属性absolute和transform。
你可以阅读更多关于它在这里：https://www.w3schools.com/cssref/css3_pr_transform.asp
.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;
transform: rotate(42deg);
position: absolute;
top: -80px;
right: 3px;
}
.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>+0
哦...... Ivin raj也发布了相同的内容。作为偏好接受你的答案..谢谢@惠威.. –
答
应用
margin-left: -59px;
margin-top: -68px;
transform: rotate(45deg);
p元素应该做的伎俩？
答
试试这个
.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;
transform: rotate(42deg);
position: absolute;
top: -80px;
right: 3px;
}
.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-index的？它将推动“黑色三角形”元素的元素。 – ZombieChowder