andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update border with top triangle

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-20 12:07:45 +03:00
parent 2b8884280b
commit 2cfe02bffd
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
snippets/border-with-top-triangle.md
View File

@ -20,7 +20,7 @@ Creates a text container with a triangle at the top.
margin-top: 20px;
}
.container::before, .container::after {
.container:before, .container:after {
content: '';
position: absolute;
bottom: 100%;
@ -29,7 +29,7 @@ Creates a text container with a triangle at the top.
border-bottom-color: #dddddd;
}
.container::after {
.container:after {
left: 20px;
border: 10px solid transparent;
border-bottom-color: #ffffff;
@ -38,10 +38,10 @@ Creates a text container with a triangle at the top.
#### Explanation
- Use the `::before` and `::after` pseudo-elements to create two triangles.
- The color of the `::before` triangle should be the same as the container's border color.
- The color of the `::after` triangle should be the same as the container background color.
- The border width of the `::before` triangle should be `1px` wider than the `::after` triangle, in order to act as the border.
- The `::after` triangle should be `1px` to the right of the `::before` triangle to allow for its left border to be shown.
- Use the `:before` and `:after` pseudo-elements to create two triangles.
- The color of the `:before` triangle should be the same as the container's border color.
- The color of the `:after` triangle should be the same as the container's background color.
- The border width of the `:before` triangle should be `1px` wider than the `:after` triangle, in order to act as the border.
- The `:after` triangle should be `1px` to the right of the `:before` triangle to allow for its left border to be shown.
#### Browser support