Any Way to Have Text in Div Fill a Triangle Shape

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/

How do you create a div with a triangle shape using css only?

You can achieve this using linear-gradient. Demo:

.text {  width: 400px;  background-image: linear-gradient(45deg, transparent 50px, black 50px);  padding-left: 100px;  color: yellow;}

<div class="text">  <h1>Some Name Here</h1></div>

How to make triangle shape in before a div in pure css?

Write like this:

.dashbord .active:after{
    content:'';
    position:absolute;
    right:-11px;
    top:3px;
    z-index:-1;
    width:22px;
    height:22px;
    background:green;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    box-shadow:-3px 0 0 0 rgba(153,40,19,1) inset;
    background: -moz-linear-gradient(left top, #e94541 0%,#b43720 100%);
    background: -webkit-linear-gradient(left top, #e94541 0%,#b43720 100%);
    background: linear-gradient(left top, #e94541 0%,#b43720 100%);
}

Check this http://jsfiddle.net/TBB9S/2/

How to make a triangle shape in the bottom of the div

I'd go with clip-path to achieve something like this.

.clipped {  clip-path: polygon(100% 0%, 100% 70%, 50% 90%, 50% 90%, 0 70%, 0 0);}
img {  max-width: 100%;  width: 100%;}

<div class="clipped">  <img src="https://loremflickr.com/1280/720"></div>

div with css triangle in the background

Try use the Cross browser tecnique of triangle shape.

It is cross browser and not give pixelate effect.

Here is a working demo.

Drawing a triangle over a div in CSS

You can achieve that triangle with a pseudo element ::after, some positioning and transforming:

li {  position: relative;  display: block;  background: #04a4a9;  padding: 1em;  overflow: hidden;}li a {  color: white;  text-decoration: none;}li::after {  content: '';  position: absolute;  width: 15px;  height: 15px;  background: white;  right: -8px;  top: 50%;  transform: translate(0, -50%) rotate(45deg);}

<section class="sidebar">  <ul class="sidebar-menu">    <li class="active">      <a href="/home">        <i class="fa fa-users active-fa"></i>         <span class="menu-title">MY USERS</span>      </a>    </li>  </ul></section>

How to position text at the bottom of a triangle div?

You could use a pseudo element to make the triangle.

div {  text-align: center;  width: 126px;  margin: 126px auto;  position: relative;  color: white;}div:after {  content: '';  position: absolute;  width: 0;  height: 0;  left: 50%;  bottom: 0;  transform: translateX(-50%);  z-index: -1;  border-left: 126px solid transparent;  border-right: 126px solid transparent;  border-bottom: 126px solid #D30000;}

<div>Triangle</div>

Draw triangle in corner of div

You can use position: absolute on triangle element and set top and right properties to 0.

.container {  position: absolute;  top: 5%;  left: 5%;  width: 60%;  height: 30%;  background: black;  color: white;  border-radius: 12px;  overflow: hidden;}
.triangle {  width: 0;  height: 0;  border-style: solid;  border-width: 0 30px 30px 0;  border-color: transparent #608A32 transparent transparent;  right: 0;  top: 0;  position: absolute;}

<div class="container">  <div class="triangle"></div></div>

---

Related Topics