Menu Close

How to add a border to div with top triangle – CSS

0
(0)

Actually we can create the “triangle part” in border itself by using the :before or :before pseudo-element. Check the below codes for reference.

Method 1:

<!DOCTYPE html>
<html>	
    <head>
        <style>
            body {
                background-color: #F3F5F6;
                width: 500px;
                margin: 0 auto;
                padding: 10%;
            }
            .message {
              display: block;
              position: relative;
              background: #FFFFFF;
              padding: 15px;
              border: 1px solid #DDDDDD;
              margin-top: 20px;
            }
            .message:after {
              content: '';
              display: block;
              position: absolute;
              left: 20px;
              bottom: 100%;
              width: 0;
              height: 0;
              border-bottom: 10px solid #FFFFFF;
              border-top: 10px solid transparent;
              border-left: 10px solid transparent;
              border-right: 10px solid transparent;
            }
        </style>
    </head>
    <body>
        <h1>Create triangle shape for div Method 1</h1>
        <div class="message">
          Testing
        </div>
    </body>
</html> 

Method 2:

<!DOCTYPE html>
<html>	
    <head>
        <style>
            body {
                background-color: #F3F5F6;
                width: 500px;
                margin: 0 auto;
                padding: 10%;
            }
            .message {
              display: block;
              position: relative;
              background: #FFFFFF;
              padding: 15px;
              border: 1px solid #DDDDDD;
              margin-top: 20px;
            }
            .message:before, .message:after {
              content: '';
              display: block;
              position: absolute;
              bottom: 100%;
              width: 0;
              height: 0;
            }
            .message:before {
              left: 19px;
              border: 11px solid transparent;
              border-bottom-color: #ddd;
            }
            .message:after {
              left: 20px;
              border: 10px solid transparent;
              border-bottom-color: #fff;
            }
        </style>
    </head>
    <body>
        <h1>Create triangle shape for div Method 2</h1>
        <div class="message">
          Testing
        </div>
    </body>
</html> 

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Share

Posted in CSS, HTML

Leave a Reply

Your email address will not be published. Required fields are marked *

You can also read...