在CSS中製作一個形狀

-2

可以在CSS中製作這個形狀嗎？在CSS中製作一個形狀

enter image description here

如果是這樣，指定如何？請說明性並添加評論，以便其他人也可以從中受益！

來源

2014-02-26 Hassan

您還可以通過顯示您嘗試過的內容來讓其他用戶受益。 – Felix

@Hassan看到我想要的形狀的答案。 – KunJ

有許多在線教程可用於使用CSS3製作形狀。但是我爲你演示..

CSS應該是這樣..

div{ 
border:20px solid red; 
border-bottom: 20px solid transparent; 
border-left: 20px solid transparent; 
border-right: 20px solid transparent; 
} 
<div></div>

這裏是演示給你的。 http://jsbin.com/zevavica/1/

來源

2014-02-26 05:28:42

你能解釋你是怎麼做到的嗎？ – Hassan

我已經通過更改顏色爲您更新了示例，希望通過這種方式您可以瞭解邊界效果的工作原理。檢查上面的演示鏈接或點擊她..'http：// jsbin.com/zevavica/1 /' –

這是答案，打勾！ – Hassan

形狀在CSS中是可能的，並且有很多在線資源都有關於如何製作它們的示例和教程。

這裏就是其中之一：http://www.css3shapes.com/

我會建議你做谷歌的研究很少，你可以找到你需要的任何東西。

祝你好運！

來源

2014-02-26 05:24:22 Ljubisa

不錯，非常感謝！ – Hassan

歡迎哈桑，祝你好運！ – Ljubisa

upvote會是好夥伴！ – Hassan

您可以在您的HTML文檔中創建一個div並將下面的CSS應用到它。

#trapezoid { 
    border-top: 100px solid grey; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    width: 600px; 
}

來源

2014-02-26 05:33:28 Crystal

形狀你想（不完全，但你可以設置相應的尺寸）

CSS：

#holder { 
    background: #EEF3FA; 
    height:40px; 
    width: 340px; 
} 
#shape { 
    width: 300px; 
    border-top: 20px solid #8D8D8D; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
}

HTML：

<div id="holder"> 
    <div id="shape"></div> 
</div>

來源

2014-02-26 05:35:35 KunJ

上面的一個作品，但我會看看這個！ – Hassan

oml不能停止笑，像形象一樣！做得好！ – Hassan

@Hassan謝謝:) – KunJ

薩mple：

HTML

<div id='trapezoid'></div>

CSS

#trapezoid { 
    border-bottom: 100px solid red; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width: 300px; 
    -webkit-transform:rotate(180deg); 
}

我希望這可以幫助你。感謝:-)

來源

2014-02-26 05:35:42

工作正常，謝謝！ – Hassan

在CSS中製作一個形狀

回答

相關問題