CSS Triangle Mixin

最新推荐文章于 2024-06-19 14:48:22 发布

cunqu9743

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量222

点赞数

文章标签：定位 css html js html5 ViewUI

有一种相当流行CSS hack，它在0宽度/ 0高度元素上使用透明边框来模仿三角形。在CSS-Tricks上有一个CSS片段来描述它。

如果像我一样，您从未完全记得它是如何工作的，请确保我们可以使用Sass来帮助我们。

/// Triangle helper mixin
/// @param {Direction} $direction - Triangle direction, either `top`, `right`, `bottom` or `left`
/// @param {Color} $color [currentcolor] - Triangle color 
/// @param {Length} $size [1em] - Triangle size
@mixin triangle($direction, $color: currentcolor, $size: 1em) {
  @if not index(top right bottom left, $direction) {
    @error "Direction must be either `top`, `right`, `bottom` or `left`.";
  }

  width: 0;
  height: 0;
  content: '';
  z-index: 2;
  border-#{opposite-position($direction)}: ($size * 1.5) solid $color;
  
  $perpendicular-borders: $size solid transparent;
  
  @if $direction == top or $direction == bottom {
    border-left:   $perpendicular-borders;
    border-right:  $perpendicular-borders;
  } @else if $direction == right or $direction == left {
    border-bottom: $perpendicular-borders;
    border-top:    $perpendicular-borders;
  }
}

补充笔记：

*对opposite-position功能来自Compass ; 如果您不使用Compass，则可能需要拥有自己的 ;
* mixin不处理三角形的定位；不过，最好将其与定位混入结合起来；
* content指令旨在允许它在伪元素上使用，实际上在大多数情况下都是如此。

用法

.foo::before {
  @include triangle(bottom);
  position: absolute;
  left: 50%;
  bottom: 100%;
}

.foo::before {
  width: 0;
  height: 0;
  content: '';
  z-index: 2;
  border-top: 1.5em solid currentColor;
  border-left: 1em solid transparent;
  border-right: 1em solid transparent;
  position: absolute;
  left: 50%;
  bottom: 100%;
}