Question

This（差不多）是我想创造的东西：

HTML

<div class="hexagon1">
  <div class="hexagon-in1">
    <div class="hexagon-in2">
    </div>
  </div>
</div>

CSS

.hexagon1 {
  overflow: hidden;
  visibility: hidden;
  -webkit-transform: rotate(120deg);
  -moz-transform: rotate(120deg);
  -ms-transform: rotate(120deg);
  -o-transform: rotate(120deg);
  transform: rotate(120deg);
  width: 400px;
  height: 200px;
  margin: 0 0 0 -80px;
}

.hexagon-in1 {
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

.hexagon-in2 {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url(http://placekitten.com/240/240);
    visibility: visible;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}

问题是，我需要六边形上的边框，如果可能的话，我想将图片放在img-tag中。我尝试在div上添加边框，但由于visibility-hidden或overflow-hidden属性，我在六边形的顶部和底部只有一个边框。

这是我在google搜索时发现的内容：

http://csshexagon.com/

https://www.queness.com/post/13901/create-beautiful-hexagon-shapes-with-pure-css3

https://github.com/web-tiki/responsive-grid-of-hexagons

我在Stackoverflow上也发现了一些关于这个问题的问题，但是它们都没有解释你是如何创建六边形的。此外，示例中的六边形都位于边缘，这不是我想要的（如代码中所示）。我只需要一个六边形而不是网格。

当我试图改变示例的样式时，它总是以一种灾难性的混乱结束。这就是为什么我想知道如何创建和计算用于创建带边框和内部图片的六边形的div。

宽度与高度的比率是多少？

如何创建每边宽度相同的边框？

我必须将图片作为背景图片放在哪里？

图片应该有多大（占div的百分比）？

您真正需要创建六边形的转换？（我看到了一个使用缩放，旋转和平移以获取图片的示例）

如何计算轮换？

如何计算所需的保证金？

因为我是网络设计的新手，有人可以解释这个尽可能简单吗？如果有人可以根据上面的示例代码向我展示如何计算数字就足够了。我知道六边形的内角是120°，就是这个。

感谢您的期待。：）

修改

我发现另一个关于六边形的页面，但只是为了创建形状而不是真正放置图像，也没有围绕它的边框：

http://jtauber.github.io/articles/css-hexagon.html

Answer 1

我会建议您使用SVG approach创建此形状。它非常简单，如果你正在考虑一个响应式网页布局，它可以很容易地实现。

这种方法的原因 -

<强> 1。你不必写很多css。

<强> 2。内联SVG是现代网络方法。

第3。可扩展且耐用。 的 4。响应

polygon中的svg标记形成了您想要的形状，在这种情况下，我们可以使用css定位我们想要实现的内容，例如border。已使用Image链接pattern。

以下是您需要的示例摘要。

svg {
  width: 30%;
  margin: 0 auto;
}

#hex {
  stroke-width: 2;
  stroke: red;
}

<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
      <image xlink:href="https://dummyimage.com/600x400/red/fff" x="-25" width="150" height="100" />
    </pattern>
  </defs>
  <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/>
</svg>

<svg viewbox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
        <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-40" width="150" height="100" />
      </pattern>
    </defs>
    <polygon id="hex" points="25 8 75 8 100 50 75 92 25 92 0 50" fill="url(#img)" />
  </svg>

Answer 2

重要提示

请注意，此解决方案不适用于那些想要创建所有浏览器支持的类似内容的用户，因为IE不支持此示例中使用的clip-path-property !!

由于@SahilDhir，我找到了一种方法，尽管它更像是一种解决方法：

<强> HTML

<div class="poligon">
  <img src="http://lorempixel.com/g/600/400/">
</div>

<强> CSS

.poligon {
  display: inline-block;
  position: relative;
  width: 200px;
  height: 180px;
  background: red;
  box-sizing: border-box;
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.poligon img {
  position: absolute;
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  width: 196px; /* container height - (border thickness * 2) */
  height: 176px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

请注意，我在这里没有多少计算，而是尝试实现六面数字。

我会遇到问题，我的照片将具有透明背景，但我认为我可能会产生一个线性渐变来填充背景多边形。我将不得不首先尝试，虽然^^

我不会将此标记为最终答案，因为我的问题尚未得到真正回答。我仍然希望能够像上面给出的示例中那样创建一个六边形，我可以按照我想要的方式调整高度和宽度以及边框厚度。

<强> 修改

由于我没有找到更好的解决方案，我在这里改进了一个，并找出了所需的计算：

<强> HTML

<div class="poligon">
  <div class="hex-background">
    <img src="https://img.clipartfest.com/953d8641fe933437bbc41d48e6fc8492_yellow20stars20clipart-christmas-stars-clipart-without-background_532-506.png">
  </div>
</div>

<强> CSS

.poligon {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 103.92px; /* width * 0.866 */
  background: red;
  box-sizing: border-box;
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hex-background {
  position: absolute;
  background-color: white;
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  width: 116px; /* container width - (border thickness * 2) */
  height: 99.92px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.poligon img {
  position: absolute;
  width: 116px; /* container width - (border thickness * 2) */
  height: 99.92px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

如果您想要一个相同的六边形，则剪辑路径部分是正确的。

根据上图，您可以看到我是如何找到这些数字的;）如果您对此有进一步的疑问，请不要犹豫。我会尽力解释它。

Answer 3

我需要类似的东西，最简单的方法是使用两个六边形，一个在另一个上面。

使用 The Shapes of CSS 提供的形状：

  public class GithubQueryTask extends AsyncTask<URL, Void, String> {

    // TODO (26) Override onPreExecute to set the loading indicator to visible

    @Override
    protected String doInBackground(URL... params) {
        URL searchUrl = params[0];
        String githubSearchResults = null;
        try {
            githubSearchResults = NetworkUtils.getResponseFromHttpUrl(searchUrl);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return githubSearchResults;
    }

    @Override
    protected void onPostExecute(String githubSearchResults) {
        // TODO (27) As soon as the loading is complete, hide the loading indicator
        if (githubSearchResults != null && !githubSearchResults.equals("")) {
            // TODO (17) Call showJsonDataView if we have valid, non-null results
            mSearchResultsTextView.setText(githubSearchResults);
        }
        // TODO (16) Call showErrorMessage if the result is null in onPostExecute
    }
}

这是我为您制作的CodePen：http://codepen.io/vogelbeere/pen/peYjNe

html / css：如何创建六边形图像占位符

3 个答案: