How to implement a box with sharp corners in CSS?

In elementUI we often have components like this:For a popover like this, it’s easy to write something like this:So the focus is on the top tip how to do it:The way I implemented this is as follows: 1. Draw a rectangle like this, 2. Fix a triangle somewhere on top of the rectangle, like this:In this case, the code looks like this:

So how do you implement shadows like those in elementUI? The answer is to use two triangles, one for the color of the shadow and one for the color inside the box, and then the first triangle is positioned a few pixels above the border width of the second triangle. It’s a little hard to understand, but here it is: the yellow is the shadow of the borderWith that in mind, let’s continue to write:The code at this point looks like this:

h2 {
  width: 300px;
  height: 200px;
  border: 1px solid #dedcdc;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  background: white;
}
#test {
    top: 69px;
    left: 30px;
    position: absolute;
    border-width: 10px;
    border-style: solid;
    width: 0px;
    height: 0px;
    border-color: transparent;
    border-bottom-color: #e0dede;
}
Copy the code

Finally, let’s draw another triangle one pixel below this triangle and set it to white:CSS code is as follows:

h2 {
    width: 300px;
    height: 200px;
    border: 1px solid #dedcdc;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    background: white;
}
#test {
    top: 69px;
    left: 30px;
    position: absolute;
    border-width: 10px;
    border-style: solid;
    width: 0px;
    height: 0px;
    border-color: transparent;
    border-bottom-color: #e0dede;
}
#test::after {
    content: "  ";
    top: -9px;
    left: -10px;
    position: absolute;
    border-width: 10px;
    border-style: solid;
    width: 0px;
    height: 0px;
    border-color: transparent;
    border-bottom-color: white;
}
Copy the code