How to place something in a triangle-shaped box?


Tags: html,css,html5

Problem :

I found various examples of how to create triangles using CSS (like this one); all of them are based on creating a 0-sized box and fiddling with borders to create the triangle shape. Ok, very nice.

But how can I actually place something inside such a triangle?



Solution :

You can use positioning techniques to place some content over the triangle and not under the triangle..

I emphasized over and under because using positioning am positioning the text over the triangle, so triangle element isn't the parent of the content, as to create triangles we use height: 0; and width: 0; so you need to overlay the text.

Just make sure you use position: relative; for parent element holding absolute positioned element.

Didn't used z-index but you can use that to play safe with the stacking order.

Demo

<div class="wrap">
    <div class="triangle"></div>
    <span>Hello</span>
</div>

div.wrap {
    position: relative;
}

div.triangle {
    height: 0;
    width: 0;
    border: 50px solid #f00;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

div span {
    position: absolute;
    left: 35px;
    bottom: 0;
}

    CSS Howto..

    How to add css style in php email?

    How to avoid WebKit contentEditable copy-paste resulting in unwanted CSS?

    Css how to replace block after click button

    How to make a DIV section clickable?

    jQuery, given a Variable with DIV with items, how to scroll an Item to the Left

    Animated HTML,CSS JavaScript. How can I implement this [closed]

    How to make Instagram.js feed responsive in Bootstrap?

    How to unbind element then allow that element to bind again

    How can I move text to the left with CSS?

    How to create a skin for mediaelement.js?

    A plugin or tool to show what elements on a page are effecting other elements?

    How to position a scroll box on top of an image using only inline CSS

    CSS how to align elements

    How to make ul nav fill the entire bottom of page evenly (without table display)

    CSS: how to enforce word wrap on an odd situation?

    How to Set custom text Color in QTextEdit?

    How can i align the text in center of a row in css?

    How to Keep element absolute at their location bootstrap 3

    Android Crosswalk Project: How to use css?

    JavaFx: How to get the corresponding stylesheet for a given style class of a Node?

    How to place a div at top center position of a page using css…?

    How can I specify a *.css file in an ASP.NET UserControl?

    CSS/HTML problem in IE - how to fix?

    How to remove dot '.' from CSS list-style:decimal [duplicate]

    How to style one react component inside another?

    How to get css class name using Selenium?

    How do I create an animation of scrolling text with just HTML and CSS (or java i guess) like apple used to have on their livepage?

    How to make this loading animation?

    How to make a div scroll able when window height is reached

    How to make middle div acting like a fixed positioned header when middle div go to the top place by mouse scrolling