CODEWITHSUNDEEP
htmlcss
Prasath V
Prasath V

Reputation: 1356

How to put text content into div

I have tried a design as like in below image.

clip

It's all done except one little part. You can see the text "best value" on top right corner. The text was overlapping the element.

When i check with inspect element result shows like in below image.

result

How to get the text into that .triangle-skewed class. Thanks in advance.

.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>

Upvotes: 0

Views: 157

Answers (3)

Ivin Raj
Ivin Raj

Reputation: 3429

try this one

.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>

Upvotes: 1

Hewlett
Hewlett

Reputation: 161

You have to use the properties absolute and transform.

You can read more about it here: 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>

Upvotes: 1

DevMoutarde
DevMoutarde

Reputation: 597

Applying 

margin-left: -59px;
margin-top: -68px;
transform: rotate(45deg);

to the p element should do the trick?

Upvotes: 0

Related Questions