How to make a box with arrow in CSS?

user_84201 0
Viewed 75884

How to make a box with arrow in CSS?

Making round corner is easy. but any idea to make the arrow on left side without using image.

Is it possible to make possible with

only one elements <p>....</p>

body {
  background: #ff004e;
  padding: 40px
}
p {
  background: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 250px;
  height: 150px
}
<p></p>

enter image description here

css-shapes css
7 Answers
user_19031420

My answer (with no flat edge), added some calculation formula:

.mainBox {
    border: solid 1px #e0e0e0;        
}

.mainBox:before {
    content:"";
    position: absolute;
    /*The right value must be calculated with: (top value of after) - (top value of before) = (right value of before) */
    /*example: (-4px) - (-7px) = 3px*/
    right: 72px; 
    /*The `top` value must be identical to border-width*/
    top: -7px; 
    width: 0;
    height: 0;
    border-style: solid;
    /*The `border-width` value must be identical to top*/
    border-width: 0 7px 7px 7px;
    /*The border color 3rd (#e0e0e0) value must be identical to its parent border color*/
    border-color: transparent transparent #e0e0e0 transparent;
    /*The (z-index of before) must at least one below the (z-index of after)*/
    /*Example: (z-index of before) < (z-index of after) or 9998 < 9999*/
    z-index:9998;
}

.mainBox:after {
    content:"";
    position: absolute;
    right: 75px;
    top: -4px; /*suppose to be identical to border-width*/
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 4px 4px 4px;
    border-color: transparent transparent #fff transparent; 
    z-index:9999;
}

The basic rules are:

  1. The before right value must be calculated with: (after's top) - (before's top) = (before's right)

example: (-4px) - (-7px) = 3px

  1. The before and after's top value must be identical to border-width.

  2. The border color 3rd (#e0e0e0 in the example) value must be identical to its parent border color.

  3. The before's z-index must at least one below the after's z-index.

example: (before's z-index) < (after's z-index) or 9998 < 9999.

The result:

enter image description here

user_68444810
Related