在一個div

只是想知道我怎樣才能使更多的頂點一個div就像下面的圖片製作超過4個頂點： enter image description here 在一個div

有沒有辦法做到這一點與CSS或JavaScript？我想要做的是在這個橙色形狀中添加一個文本，因此位於左上區域的圖像不覆蓋文本。

來源

2014-09-22 user3186354

你不能只是把圖像的DIV中，而文本將環繞它？你能做出這樣一個div的答案是否定的。 – Tom 2014-09-22 02:09:35

湯姆，實際上沒有。我在wordpress中使用它，因爲它是一個響應式網站，所有的東西，它將是一個噩夢，使得它乾淨，而且，我只是喜歡保持我的CSS清潔和容易。 – user3186354 2014-09-22 02:11:31

你可以捏造事實。我不確定需要多少圖片，但我使用絕對定位的遮罩<div>對它進行了相同的重新創建，以保持邊框看起來像你的樣子。這實際上是一個嵌套的div，其底部和右側邊框重疊（在頂部和左側）具有設置所有四個邊框的div。

你可以看到JSFiddle here

要回答你的問題

不，你不能讓一個多邊形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; 
}

來源

2014-09-22 03:41:32 leigero

嗯，邊界並不是真的有必要，通過那個插圖我只是想表明這個形狀是什麼樣子，但是感謝您的幫助:) – user3186354 2014-09-22 19:50:18

你可以用下面的方式嘗試一些東西，你可以將圖像浮在左上角。

 <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>

來源

2014-09-22 02:31:02 Chimba

你可以把圖像放在一個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/

來源

2014-09-22 02:32:31 Azarus

這是可以做到。我重新創建了你的例子，包括黑色輪廓（儘管我不知道邊界有多重要）。您將需要使用float元素來控制文本，但是您可以絕對剪輯div標籤，但是您希望使用剪輯路徑。我粘貼下面的代碼，但你可以在http://jsfiddle.net/4mjnuxpv/

樣本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>

和伴隨的風格（背景爲黑色邊框，裁剪與玩的jsfiddle是橙色區域和邊界是控制文本流無形專區隨意的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; 
}

來源

2014-09-22 03:18:21

回答

相關問題