几个实用的CSS代码块

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

CSS是一门神奇的语言，用的好可以让页面看起来更优雅，用的不好不仅会给自己带来工作量，也可能会影响页面的美感。想要把CSS学完，并且牢牢记住，这个还真有点难度。一般常用的我们会写，因为用的多了，如果是遇到不常用的属性，估计只能靠“百度”了。本文总结了笔者在实际项目中遇到的CSS问题，感觉有点意思，就记录下来。

使用css 实现三角形、多边形等不规则形状

如果是单纯实现一个三角形，特别是等腰三角形，我们可以采用border的方式来实现：

div {
    margin: 100px auto;
    width: 0;
    height: 0;
    border: 50px solid;
    border-color: transparent transparent red;
}
复制代码

运行结果：

如果我们要实现多边形，我们可以考虑使用裁剪的方式，裁剪出多边形的形状。

clip-path：使用裁剪的方式用于创建元素的可显示区域。裁剪后，区域内的部分为显示，区域外的部分则隐藏。clip-path可选的值有很多，例如：

inset()：矩形
circle()：圆形
ellipse()：椭圆
polygon()：多边形
path()：任意形状

polygon有两种参数需要传入，一种是可选的填充规则，省略不传则为默认值，通常来说不传；另一种是三对或者更多的坐标值，坐标值按照笛卡尔坐标系，顺序为“上右下左”，分别指定每个点的坐标，坐标采用距离原点的百分比或者具体的px。

div {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); // 绘制一个菱形
}
复制代码

运行结果：

div {
    clip-path: polygon(50% 0px, 100% 25%, 75% 100%, 25% 100%, 0px 25%); // 五边形
}
复制代码

运行结果：

flex布局下实现文本省略号展示效果

单个元素如果是flex布局无法实现省略号的效果，因此至少需要两层。父元素设置为flex布局，子元素设置省略号展示。

// html
<div class='flex'>
    <div>前置内容</div>
    <div class="flex-content">这是一段很长的文字放在段落中间并且需要使用省略号展示</div>
    <div>后置内容</div>
</div>
// css
/* 父元素设置为flex布局 */
    .flex{
      display: flex;
      border: 1px solid red;
      width: 300px;
    }
    /* 需要省略的元素，需要设置flex:1和min-width:0 */
    .flex-content {
      text-overflow: ellipsis;
      overflow-x: hidden;
      white-space: nowrap;
      flex: 1;
      min-width: 0;
    }
复制代码

运行结果：

实现自定义dash虚线分割线

采用背景图片渐变的方式

// css
.dash {
    width: 100%;
    height: 30px;
    background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
    background-size: 24px 6px;
    background-repeat: repeat-x;
}
复制代码

运行结果：

使用重复性渐变实现分割线

repeating-linear-gradient

/* <div class="repeat"></div> */

.repeat {
  width: 300px;
  height: 10px;
  background-image: 
    repeating-linear-gradient(
      45deg,
      #00f 0 10px,
      transparent 10px 15px,
      #f00 15px 25px,
      transparent 25px 30px
    );
}
复制代码

image-20220512171322511-16523468038903-16543532588532.png

总结

本文记录了几个可能会用到的CSS代码块，下次如果还遇到类似的问题，就不用无脑的百度了，直接复制代码即可。

原创不易，转载请注明出处。