在CSS中設計圓角矩形

我正在設計一個公司的時間表，它將有多個垂直堆疊的矩形向下，但我不知道如何修改矩形的屬性，因爲我真的不擅長設計CSS中的自定義形狀。我能夠做一個只有邊框的矩形here。在CSS中設計圓角矩形

這裏是我用來繪製一個矩形的CSS：

#box { 
    border:10px solid #000; 
    border-radius: 10px 40px 40px 10px; 
    width: 200px; 
    height: 100px; 
    background-color:#ccc; 
}

到目前爲止，我有一個基地，但我不知道如何與邊界線消失的部分來設計定製的矩形另一條線路正在下降。最後，我希望它看起來像這樣：

enter image description here

可以利用CSS的人幫我出這些自定義的矩形設計，甚至是2。我真的很感激它，因爲我可以繼續使用基礎自定義矩形進行設計。多謝你們！

來源

2014-03-18 PatrickGamboa

可你剛纔設置標題用白色背景的東西？ – Chad

..yup，並使用絕對定位來掩蓋邊界。 –

在這裏，我根據您放置在這裏的圖像製作了一個頁面。檢查Demo。

span { 
    font-size: 20px; 
    background: #fff; 
    position:absolute; 
    top: -20px; 
    right: 70px; 
    padding:4px; 
} 
p{ 
    border-radius: 25px; 
    width: 250px; 
    height: 150px; 
    border:10px solid #000; 
    background-color:white; 
    position:relative; 
    padding-top:15px; 
} 

p:after{ 
position:absolute; 
content: " "; 
    width:50px; 
    height:50px; 
    border-right:10px solid #000; 
    right:18px; 
    bottom:-55px; 
    } 
p:last-child:after{border-right:0;}

/HTML代碼會是這樣/

<div id="box"> 
<p><span>Title will come here</span>so far, I have a base, but I have no idea how to customly design the rectangle with dissapearing section on the border lines and another line going down, the way I want it like this:</p> 
     <p><span>Title will come here</span>so far, I have a base, but I have no idea how to customly design the rectangle with dissapearing section on the border lines and another line going down, the way I want it like this:</p> 
     <p>><span>Title will come here</span>so far, I have a base, but I have no idea how to customly design the rectangle with dissapearing section on the border lines and another line going down, the way I want it like this:</p> 
</div>

來源

2014-03-18 18:57:22

這個解決方案對你有幫助嗎？ –

哇謝謝！這正是我想要的！現在我可以有這個基礎！可能還有一件事我想問你的真棒幫助嗎？只是在這裏改變一些想法，設計對於我的模板來說是非常棒的！我想知道不是使用邊框線，我怎樣才能使它成爲點？而不是矩形之間的微小的黑線，我怎樣才能使它從矩形的右邊開始畫出一條曲線，然後繼續往下一個矩形？（看起來像是希望池塘裏的青蛙的樣子） – PatrickGamboa

虛線你可以使用這個邊框屬性'dashed'或'dotted'，所以它會像'border：2px dashed black;' –

你需要像這樣的東西？

的Html

<div id="box"> 
    <h1>title goes here</h1> 
    <p>Hello</p> 
</div>

CSS

#box{ 
    border:10px solid #000; 
    border-radius: 20px; 
    width: 200px; 
    height: 100px; 
    background-color:#fff; 
} 
h1 { 
    font-size: 20px; 
    background: #fff; 
    position: relative; 
    top: -30px; 
    right: -10px; 
    display: inline-block; 
}

demo

編輯

你的第二個問題，你可以做這樣的事情，而不使用圖像，

DEMO

來源

2014-03-18 18:43:59

只需加個左右填充 –

哦哇！我得到了背景工作！我想我可以繼續使用這個標題，但是我還有一個問題，它是與矩形一致的線條，是否可以將它添加到矩形之間的某處？我從來沒有見過一個CSS屬性可以:(:(對不起，我是一個非常可怕的設計師） – PatrickGamboa

如何：發生在前面的另外三個背後一個div，並給它一個邊界 - 右屬性。然後給出其他三個高於1的z-索引。最後給出三個盒子中每一個的標題zindex高於最後一個。另外儘量不要給箱子高度，而是填充，這樣字母不會溢出盒子。下面是一些的CSS（需要的調整）：

/*the container behind the boxes*/ 
    #cont{background-color:transparent; 
     height:/*whatever height*/; 
     width:/*whatever width*/; 
     border-right:5px solid black;} 



    #box{ 
     background-color:white; 
     border-radius: 10px; 
     position:relative; 
     z-index:2; 
    } 

    #time{ 
    position:relative; 
    z-index:3; 
    }

這是最簡單的方法... 如果你不明白這一點，然後做一些教程！它會幫助你！ HAVE A古德） Work in editfy with a live preview!

來源

2014-03-18 19:09:09

在CSS中設計圓角矩形

回答

相關問題