Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How CSS triangles work?

    @mukul.kant
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 315
    Comment on it

    Hello folks,

    How css triangle works ? actually when we create css triangle, its means we are just showing and hiding borders of any element.


    The angle intersects at (45) so the intersection edge is used by border here and we can also skew an angle to change the border width.

    Below is example of border angle(45)


    .angle{
    border:20px solid;
    height:0;
    width:0;
    border-top-color:red;
    border-bottom-color:green;
    border-left-color:blue;
    border-right-color:gary;
}

    Now, which side border you want that will have color and other side border will transparent, For example, I need right side border then,

        border-top-color:transparent;
    border-bottom-color:transparent;
    border-left-color:transparent;
    border-right-color:gary;

    OR 

        border-color:transparent  gray transparent  transparent ;
    css triangle illustrator css-triangles How to Override Inline CSS Styles html css3 HTML5
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: