有趣且重要的css知识合集（3）高难度的css样式

林大大哟

已于 2023-06-05 18:58:36 修改

阅读量296

点赞数

分类专栏： css有趣知识文章标签： css html css3

于 2022-02-08 14:53:01 首次发布

本文链接：https://blog.csdn.net/qq_39404437/article/details/122823984

版权

css有趣知识专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、三角形

width:0;
height:0;
border-width:0 40px 40px;
border-color:transparent transparent color

2、八边形

.box {
  width: 80px;
  height: 16px;
  background: #b37059;
  position: relative;
  text-align: center;
  margin: 6px 0;
  &::before {
    content: '';
    width: 67px;
    height: 20px;
    border: 6px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #b37059;
    border-top-color: transparent;
    position: absolute;
    top: 100%;
    left: 0;
    transform: rotate(180deg);
  }
  &::after {
    content: '';
    width: 67px;
    height: 20px;
    border: 6px solid;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: #b37059;
    border-top-color: transparent;
    position: absolute;
    top: -200%;
    left: 0;
  }
}