61 lines
1.4 KiB
Markdown
61 lines
1.4 KiB
Markdown
### Border with top triangle
|
|
|
|
Use pure CSS to create div with top triangle.
|
|
|
|
#### HTML
|
|
|
|
```html
|
|
<div class="container">
|
|
Border with top triangle
|
|
</div>
|
|
```
|
|
|
|
#### CSS
|
|
|
|
```css
|
|
.container {
|
|
display: block;
|
|
position: relative;
|
|
background: #ffffff;
|
|
padding: 15px;
|
|
border: 1px solid #dddddd;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.container:before, .container:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 100%;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.container:before {
|
|
left: 19px;
|
|
border: 11px solid transparent;
|
|
border-bottom-color: #dddddd;
|
|
}
|
|
|
|
.container:after {
|
|
left: 20px;
|
|
border: 10px solid transparent;
|
|
border-bottom-color: #ffffff;
|
|
}
|
|
```
|
|
|
|
#### Demo
|
|
|
|
#### 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).
|
|
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.
|
|
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.
|
|
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.
|
|
|
|
#### Browser support
|
|
|
|
<span class="snippet__support-note">✅ No caveats.</span>
|
|
|
|
<!-- tags: visual -->
|