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 to set text area to maximum width in bootstrap

    How to apply css to div content based on regex

    How do I style hyperlinks separately, using CSS?

    How to move this structure to the right without using float?

    How can I push surrounding elements off screen when enlarging one?

    How to get correct overflow for proper div with fixed footer?

    How can i Convert left vertical menu to right?

    How to add shadow to reverse c radial gradient only at the edges?

    How To Add % Based Image To CSS? (for fluid layout)

    W3.CSS how to make container centered inside another container

    how to link css files in organization github pages

    How to delete the gap

    jQuery (1.8.1/1.8.2), Internet Explorer 8: How to remove css attribute transparent?

    How to make css jQuery thumbnail slides loop

    How to visually indicate current page in ASP.NET MVC?

    How can I override an inline style with an external css?

    How to target a child element of a multiple parent selector in SASS [duplicate]

    How can I align two icons on my webpage next to each other?

    How to remove critical CSS from the main.css file

    how to make a timeline using html, css, javascript?

    CSS: How to set the width and height dependent on the screen/window size?

    CSS: How to make a responsive grid without a framework

    How can I configure this gulpfile the right way to have a nice workflow

    How to change header size in css

    How to remove space after a colon in CSS with Sublime Text 3?

    How to find the css, color codes and other coding a site uses

    ExtJS - How to style disabled buttons?

    How to make a search bar clippable without pushing down elements, using 2 inputs

    how to change other element css when selected element has new class

    How can I make my CSS update consistently? [closed]