How to design disjoint triangular corner on top side of a div-CodePudding

How can I design this triangular corner marked with yellow color on top side of the inside div?

CodePudding user response：

Make a triangle then position that by position: absolute. more explanation in code:

.box {
  width: 200px;
  height: 200px;
  background-color: white;
  border: 12px solid #aaa;
}

.triangle-left {
  width: 0; /* this four code line for making a triangle */
  height: 0;
  border-top: 8px solid transparent;
  border-right: 8px solid white;
  border-bottom: 8px solid transparent;
  position: absolute; /* this three code line for positioning of triangle */
  top: 60px;
  left: 10px;
}

<div ></div>
<div ></div>

See this for how making a triangle: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_triangle-left

CodePudding user response：

try this one! anything you want is here, but first try to make a container then copy the code! https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_triangle-left