在div中創建4個以上的頂點
[英]Making more than 4 vertices in a div
問題描述
只是想知道如何制作一個包含更多頂點的div，如下圖所示：
有沒有辦法用css或JavaScript做到這一點？ 我想要做的是在這個橙色形狀內添加一個文本，因此左上方區域的圖像不會覆蓋文本。
4 個解決方案
解決方案1
2 已采納 2014-09-22 03:41:32
你可以假裝它。 我不確定需要多少圖像，但是我使用具有絕對定位的遮罩<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;
}
解決方案2
1 2014-09-22 03:18:21
這可以做到。 我重新創建了你的例子，包括黑色輪廓（雖然我不知道邊界有多重要）。 您將需要使用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的寬度和高度設置為您想要的任何尺寸，橙色將填寫它：
.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;
}
解決方案3
0 2014-09-22 02:31:02
你可以嘗試下面的方式，你可以在左上角浮動圖像。
<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>
解決方案4
0 2014-09-22 02:32:31
您可以將圖像放在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/
ThreeJs加載的頂點比obj文件中的頂點多
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.