Question

我想知道如何制作一个包含更多顶点的div，如下图所示： enter image description here

有没有办法用css或JavaScript做到这一点？我想要做的是在这个橙色形状中添加一个文本，因此左上方区域的图像不会覆盖文本。

Answer 1

你可以假装它。我不确定需要多少图像，但我使用具有绝对定位的遮罩<div>以相同方式重新创建它，以便保持边框看起来像你拥有它。这实际上是一个嵌套的div，底部和右边框重叠（在顶部和左侧）一个div，所有四个边框设置。

回答您的问题

不，你不能制作多边形div，但如果你愿意，你可以伪造一个。

<强> HTML

<body>
    <div id="container">
        <div id="mask">
           Image here
        </div>
        <div id="image">

        </div>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br />
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</body>

<强> CSS

#mask{
    position: absolute;
    width: 200px;
    height: 200px;
    top: 8px;
    left: 8px;
    background-color: white;
    border-right: 5px solid black;
    border-bottom: 5px solid black;
    z-index: 1;
}

#container{
    z-index: -1;
    background-color: orange;
    width: 500px;
    height: 500px;
    overflow: hidden;
    border: 5px solid black;
}

#image{
    width: 200px;
    height: 200px;
    float: left;
}

Answer 2

这可以做到。我重新创建了你的例子，包括黑色轮廓（虽然我不知道边界有多重要）。您将需要使用float元素来控制文本，但是您可以绝对剪切div标签，但是您喜欢使用clip-path。我粘贴了下面的代码，但您可以在http://jsfiddle.net/4mjnuxpv/

处使用jsfiddle

示例HTML

<div class="background">
<div class="clipped">
  <div class="boundary"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris 
  augue nulla, sagittis vitae leo in, pulvinar pulvinar nisi. 
  Proin quis dolor efficitur, sodales lectus eget, posuere risus. 
  Phasellus eleifend iaculis leo in efficitur. Sed lacus dui, 
  consectetur id malesuada quis, feugiat eu arcu. Sed justo magna, 
  luctus id pellentesque vel, tristique quis leo. Sed vel est id 
  orci fringilla efficitur. Morbi eleifend aliquam risus, nec 
  ullamcorper tortor cursus vel. Fusce in ante felis. Praesent 
  vehicula ante ac luctus iaculis. Aenean sed felis vitae elit 
  feugiat feugiat.
</div>
</div>

伴随的样式（背景是黑色边框，剪裁是橙色区域，边界是控制文本流的不可见div。可以将background的宽度和高度设置为任意大小。＃39;喜欢，橙色会填满它。：

.background {
  width: 200px;
  height: 500px;
  background-color: black;
  clip-path: polygon(0 100px, 100px 100px,
    100px 0, 100% 0, 100% 100%, 0 100%, 0 50px);
  -webkit-clip-path: polygon(0 100px, 100px 100px,
    100px 0, 100% 0, 100% 100%, 0 100%, 0 50px);
}

.clipped {
  padding: 5px;
  box-sizing: border-box;
  width: 100%;
  height: 100%; 
  background-color: orange;
  clip-path: polygon(2px 102px, 102px 102px, 
    102px 0, calc(100% - 2px) 0, 
    calc(100% - 2px) calc(100% - 2px), 
    0 calc(100% - 2px),
    0 52px);
  -webkit-clip-path: polygon(2px 102px, 102px 102px, 
    102px 2px, calc(100% - 2px) 2px, 
    calc(100% - 2px) calc(100% - 2px), 
    2px calc(100% - 2px),
    2px 52px);
}

.boundary {
  height: 100px;
  width: 105px;
  float: left;
}

Answer 3

你可以尝试下面的方式，你可以在左上角浮动图像。

      <html>
      <body>
      <div style="height: 60px;width: 60px;background-color: white;margin: 0px;float: left; border-          right: 1px solid black; border-bottom: 1px solid black">
      </div>
      <div style="height: 200px;background-color: orange; border: 1px solid black;width: 200px;">
      THis is awesome. THis is awesome. THis is awesome.THis is awesome. THis is awesome. THis is awesome. THis is awesome. THis is awesome.
      </div>
      </body>
      </html>

Answer 4

您可以将图像放在div中并在其上应用float：left css设置。

 <div style="float:left;margin-right:10px;margin-bottom:5px;">
    <img src="image_url" />
</div>
text text text

文字将缠绕在图像上。

在这里演示： http://jsfiddle.net/uu2mmbtj/

在div中创建4个以上的顶点

4 个答案: