Menu Close

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

Codeamend

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> 
Posted in CSS, HTML

You can also read...