CSS Triangle Containing Text

CSS triangle containing text

For your plan B (to center the text within the triangle both vertically and horizontally), which I prefer as solution, you could add this css rule:

.up p {
    text-align: center;
    top: 80px;
    left: -47px;
    position: relative;
    width: 93px;
    height: 93px;
    margin: 0px;
}

Try it here:

.up {  width: 0px;  height: 0px;  border-style: inset;  border-width: 0 100px 173.2px 100px;  border-color: transparent transparent #007bff transparent;  float: left;  transform: rotate(360deg);  -ms-transform: rotate(360deg);  -moz-transform: rotate(360deg);  -webkit-transform: rotate(360deg);  -o-transform: rotate(360deg);}
.up p {  text-align: center;  top: 80px;  left: -47px;  position: relative;  width: 93px;  height: 93px;  margin: 0px;}

<div class="up">  <p>some information text goes here    <p></div>

CSS add text inside element that is triangle

What about this?

.box{border-bottom: 300px solid #25779B;border-left: 300px solid transparent;border-right: 300px solid transparent;float:left;margin-left:-200px;position:relative;top:-50px;-webkit-transform: rotate(-45deg);}
.box > span{color:#fff;font-size:1em;font-weight:bold;position:absolute;right:-26px;top:40px;}

<div class="box"><span>Beautiful Wooded Lots</span></div>

Top/Right triangle with text in CSS

You have to make some adjustments since the triangle will naturally align to the left, you can't just rotate it the other way, you also need to use absolute positioning so it lines up on the right. This also requires some adjustments to be made to the positioning of the text:

.container {  width: 250px;  height: 250px;  position:relative;  background-color:grey;}
.corner {  width: 0;  height: 0;  border-top: 150px solid #ffcc00;  border-bottom: 150px solid transparent;  border-left: 150px solid transparent;  position:absolute;  right:0;}
.corner span {  position:absolute;  top: -110px;  width: 100px;  left: -100px;  text-align: center;  font-size: 16px;  font-family: arial;  transform: rotate(45deg);  display:block;}

<div class="container">  <div class="corner"><span>20% Special Offer</span></div></div>

How to put text on a CSS Triangle

Maybe try something like this :

body{  background: red;}
.log{  position: relative;  border-bottom:100px solid transparent ;  border-left:100px solid transparent;  border-top: 180px solid black;  border-right:100px solid transparent;  display: inline-block;  transition: all .25s ease;}
.log:hover{  border-top-color: rgba(255, 255, 255, .5);}
.log:hover .login{  color: #000;}
.login{  position: absolute;  color: #fff;  left: -50%;  top: -90px;  display: block;  width: 200px;  height: 180px;  transform: translate(-50%,-50%);  text-align: center;  box-sizing: border-box;  padding: 30px 0;  transition: all .25s ease;}

<a class="log" href="#">  <span class="login">Member<br>LogIn</span></a>

How to inscribe text inside a triangle? (CSS)

You are almost good, you need to rectify the clip-path. Your element is taking 50% of the width so you don't need 50% in the polygon

.container {
  height: 600px;
  background: white;
  max-width: 600px;
  position: relative;
}

.container [class*=shape] {
  width: 50%;
  height: 100%;
  background: yellow;
  shape-outside: var(--p);
  clip-path: var(--p);
}

.left-shape {
  --p: polygon(0% 100%, 0% 0%, 100% 0%);
  float: left;
}

.right-shape {
  --p: polygon(0% 0%, 100% 0%, 100% 100%);
  float: right;
}

.container p {
  position: relative;
  top: 50px
}

<div class="container">
  <div class="left-shape"></div>
  <div class="right-shape"></div>
  <p>Aenean ac pellentesque lacus, sit amet posuere nisl. Nunc consequat fermentum bibendum. Sed congue quis est ac pellentesque. Donec euismod turpis et massa pretium condimentum. Mauris id felis a enim consequat elementum non vel nisl. Integer nulla nulla,
    aliquet sed justo nec, gravida pulvinar purus. Suspendisse venenatis tempor dapibus. Sed ac porttitor mauris, sit amet condimentum lacus. Vivamus convallis risus ac augue mattis finibus. Pellentesque in pharetra felis. Integer vel dictum nibh. Donec
    nec scelerisque sem. Phasellus hendrerit at dolor eu mattis. Aliquam ac ante velit. Nullam tincidunt nibh ut urna euismod placerat.

  </p>
</div>

Positioning Text Inside a Triangle CSS

Without extra markup try this:

div:nth-of-type(1):before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 150px 130px 150px;
  border-color: transparent transparent #d30000 transparent;
  line-height: 0px;
  _border-color: #000000 #000000 #d30000 #000000;
  _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
  position: absolute;
  top: 0;
  z-index: -1;
  left: 50%;
  margin-left: -150px;
}

div {
  font-size: 16px;
  color: #ffffff; 
  text-align: center;
  line-height: 130px;
  position: relative;
}

Here is an example.

Ciao
Ralf

Box with a triangle like a chat

Here's the same output with :after property :

HTML

<p>
  Hello!!!
</p>

CSS

p {
  display:inline-block;
  padding:5px 6px 8px 6px;
  border-radius: 6px;
  float: right;
  margin-right: 40px;
  color:black;
  background-color:#146f79;
  position: relative;
}

p:after {
  content: "";
  position:absolute;
  margin-top:-6px;
  margin-left:-5px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #146f79;
  transform:rotate(-45deg);
  right: -15px; 
  top: 10px;
}

Fiddle

How to flow text using CSS shape-outside with a triangle?

Simply make the width:100% and use float:right instead of left:

.triangle {  width: 100%;  height: 400px;  background-color: green;  float: right;  -webkit-shape-outside: polygon(0 0, 100% 0, 100% 100%);  shape-outside: polygon(0 0, 100% 0, 100% 100%);  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);  clip-path: polygon(0 0, 100% 0, 100% 100%);}

<div class="triangle"></div><div class="text">  <p>    Lorem ipsum dolor sit amet, nobis commune pertinax ei quo, pri laudem putant instructior in. Per molestiae evertitur ut, voluptua volutpat in sit. Ad viderer scaevola lucilius eos. Ea sed vulputate dissentias neglegentur. At eam cibo nostrum efficiendi. in. Per molestiae evertitur ut, voluptua volutpat in sit. Ad viderer scaevola lucilius eos. Ea sed vulputate dissentias neglegentur. At eam cibo nostrum efficiendi. in. Per molestiae evertitur ut, voluptua volutpat in sit. Ad viderer scaevola lucilius eos. Ea sed vulputate dissentias neglegentur. At eam cibo nostrum efficiendi.  </p></div>

Any way to have text in div fill a triangle shape?

Your question is very similar to this one.

I know of no CSS way, but you can do it with JavaScript. The idea is to find where each line of text breaks and wrap the remaining text in a new child div. You have to use text ranges to accomplish it.

See this demo: http://jsfiddle.net/gilly3/CmguZ/7/

---

Related Topics