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

Update border-with-top-triangle.md

Browse Source
This commit is contained in:
Angelos Chalaris
2019-09-28 13:54:46 +03:00
committed by GitHub
parent ba58815a4c
commit 96fa1e9f37
1 changed files with 10 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,9 @@
### Border with top triangle ---
title: Border with top triangle
tags: visual,beginner
---
Use pure CSS to create div with top triangle. Creates a text container with a triangle at the top.
#### HTML #### HTML
@ -10,11 +13,8 @@ Use pure CSS to create div with top triangle.
</div> </div>
``` ```
#### CSS
```css ```css
.container { .container {
display: block;
position: relative; position: relative;
background: #ffffff; background: #ffffff;
padding: 15px; padding: 15px;
@ -24,14 +24,8 @@ Use pure CSS to create div with top triangle.
.container:before, .container:after { .container:before, .container:after {
content: ''; content: '';
display: block;
position: absolute; position: absolute;
bottom: 100%; bottom: 100%;
width: 0;
height: 0;
}
.container:before {
left: 19px; left: 19px;
border: 11px solid transparent; border: 11px solid transparent;
border-bottom-color: #dddddd; border-bottom-color: #dddddd;
@ -44,17 +38,12 @@ Use pure CSS to create div with top triangle.
} }
``` ```
#### Demo
#### Explanation #### Explanation
1. Use pseudo-element `before` and `after` to create two triangles. How to create triangle can see the [Triangle](https://30-seconds.github.io/30-seconds-of-css/#triangle). - Use the `:before` and `:after` pseudo-elements to create two triangles.
2. The color of the `before` triangle as same as the container border color. The color of the `after` triangle as same as the container background color. - The color of the `:before` triangle should be the same as the container's border color.
3. The border width of the `before` triangle is wider 1px(depend on the border width of container) than the `after` triangle, then we can see the top triangle border on the container. - The color of the `:after` triangle should be the same as the container background color.
4. The `after` triangle is on the right of the `before` triangle(1px) so that can make the left part border of the `before` triangle to visible. - 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 #### Browser support
<span class="snippet__support-note">✅ No caveats.</span>
<!-- tags: visual -->