how to put 2 triangle in together css


Tags: html,css

Problem :

I create 2 triangle with CSS and I want put inside together but I can't do it.

this is my code:

Triangle.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Triangle</title>
        <link href="style.css" type="text/css" rel="stylesheet"/>
    </head>
    <body>
        <div class="left"><div class="inside"></div></div>
    </body>
</html>

style.css

.left
{
    width: 0px;
    height: 0px;
    border-bottom: 20px solid transparent;
    border-top: 20px solid transparent;
    border-right: 20px solid yellow;
}

.left .inside
{
    width: 0px;
    height: 0px;
    border-bottom: 18px solid transparent;
    border-top: 18px solid transparent;
    border-right: 18px solid black;
}


Solution :

Is this what you mean by put inside together ?

DEMO

CSS

.left {
    position: relative;
    width: 0px;
    height: 0px;
    border-bottom: 20px solid transparent;
    border-top: 20px solid transparent;
    border-right: 20px solid yellow;
}

.left .inside {
    position: absolute;
    top: -18px; left: 2px;
    width: 0px; height: 0px;
    border-bottom: 18px solid transparent;
    border-top: 18px solid transparent;
    border-right: 18px solid black;
}

    CSS Howto..

    How do I create a bar chart in CSS with an array of PHP float values?

    How to attach a CSS stylesheet to FXML?

    How to remove href attributes from a tag and remove css associated to it in iframe using jquery

    CSS - how to dry up?

    Sencha Touch 2: how to remove right arrow of datepickerfield by using css?

    Leaflet for R: How to change default CSS cluster classes

    How to split page in half using CSS?

    How can I line up my CSS DIVs

    How to stretch a div to the viewport bottom without using absolute positioning?

    How to make a background text appear under youtube video?

    How would you switch focus to an input text upon clicking an item on a dropdown menu?

    How to add modal window parameters for this code?

    How can I insert text before an item with CSS?

    Letters appear out of the comment box in php site after comment is added. How to limit the shown letters per line?

    How to make images stay on one long line?

    How to add and remove background images in css on clicking a link on page

    How to implement vertical tables using html5/CSS

    How to order a css file?

    How to create a speech bubble with css only

    how to apply ellipse effect in which contain space in string?

    How to make text all on the same line when adding div tags?

    how do I make overflowing and float positioned elements stay all on one line?

    How to get a div text from html content

    How to move images in a grid box?

    How to change the colors of HTML form elements displayed in UIWebView?

    How to center a button WITHOUT a div using CSS

    How to use a jQuery variable in CSS property

    How to implement min left/right in css

    CSS selector hierarchy? How to reverse engineer to get the styling?

    How to add Jquery Mobile effects to dynamically added elements?