用CSS复制Photoshop变换工具的8个小方块的最佳方法 [英] Best way to replicate the 8 little square of Photoshop transform tool with CSS

问题描述

我希望页面上的某些容器具有1px的笔触，并带有八个小方块，就像下面的Photoshop选择工具一样(但中间没有十字).我想复制装饰有正方形的边框，而不是中间的空白蓝色框，因为我的容器可以包含任何类型的内容并且可以是任何大小.

I'd like some containers on my page to have a 1px stroke with eight little squares just like the Photoshop selection tool below (but without the cross at the center). I want to replicate this border adorned with squares, not the empty, blue space in between as my container can contain any type of content and be of any size.

一种解决方案是在容器内创建八个绝对定位的元素，然后分别放置每个元素.另一种解决方案是使用多个背景，但是由于我的容器占据了页面的整个宽度，因此需要创建一个稍宽一些的包装来容纳多个背景.不好，因为不简单.

One solution is to create eight absolutely positioned elements inside my containers then position each one separately. Another solution is to use multiple backgrounds, but because my container occupy the full width of my page that would entail to create a slightly wider wrapper carrying the multiple backgrounds. Not great because not simple.

还有我还没有想到的更好，也许更简单的解决方案吗?

Is there any better, perhaps simpler solution I haven't yet thought of?

推荐答案

如果您不希望使用很多元素或复杂的渐变梯度方法，则可以使用特殊字符:

If you don't want a lot of elements or a compicate way with mulitple gradient here is another idea using special character:

.box {
  width: 200px;
  height: 200px;
  margin: 20px;
  background: linear-gradient(lightblue, lightblue) 5px 0/calc(100% - 10px) 100% no-repeat;
  position: relative;
  line-height: 180px;
  letter-spacing: 180px;
}

.box:before {
  content: "\25A1\25A1\25A1";
  letter-spacing: 85px;
  display: block;
  line-height: 0px;
}

.box:after {
  content: "\25A1\25A1\25A1";
  position: absolute;
  bottom: 2px;
  letter-spacing: 85px;
  display: block;
  line-height: 0px;
}

<div class="box">
  □□
</div>

这是使用多个背景，SVG和CSS变量使代码更亮的另一种更通用的解决方案:

Here is anoher more generic solution using multiple background, SVG and CSS variable to make the code light:

.overlay {
  position: relative;
  pointer-events: none;
  --square: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 20 20"><rect width="20" height="20" fill="transparent" stroke="%23000" stroke-width="3"/></svg>');
}

.overlay:before {
  content: "";
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  background-image: 
    var(--square), var(--square), var(--square), 
    var(--square),                var(--square), 
    var(--square), var(--square), var(--square);
  background-size: 10px 10px;
  background-position: 
    top    left, top center   , top    right,
    center left,                center right,
    bottom left, bottom center, bottom right;
  background-repeat: no-repeat;
}

.box {
  height: 200px;
  width: 200px;
  background: lightblue;
  display: inline-block;
  vertical-align: top;
  margin: 10px;
}

p {
  border: 1px solid;
  padding: 50px;
}

<div class="box overlay"></div>

<div class="box overlay" style="width:100px;"></div>
<div class="box overlay" style="height:100px;"></div>

<p class="overlay"> some text</p>

这篇关于用CSS复制Photoshop变换工具的8个小方块的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！