: Cut square diagonally with inside content with CSS I am trying to do some thing like this in CSS... I have tried using the border-bottom and border-top but when I add text inside, something

@Turnbaugh909

You'll need to separate the content and triangle to different elements.

I would have a main container to define the box everything is going to sit in, use a pseudo-element to create the triangle, then have another element to position the content on top.

So the markup would look like this:

<p class="box">
<span class="content">1 NEW</span>
</p>


And the CSS like this:

.box {
/* we need this to position the pseudo-element */
position: relative;

/* set a fixed size */
width: 6em; height: 6em;

/* this is just to style the content */
padding: 6px;
color: white;
text-align: right;
}

.box:before {
/* we need this to create the pseudo-element */
content: "";
display: block;

/* position the triangle in the top right corner */
position: absolute;
z-index: 0;
top: 0;
right: 0;

/* create the triangle */
width: 0;
height: 0;
border: 3em solid transparent;
border-top-color: green;
border-right-color: green;
}

.content {
/* position the content above the triangle */
position: relative;
z-index: 1;
}




You can see a working example here: jsfiddle.net/u79dazht/1/
Some resources that may help:

developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements https://css-tricks.com/snippets/css/css-triangle/

Vote Up Vote Down