樣式輸入字段看起來像一個梯形

我想爲客戶端創建一個自定義樣式的文本字段。樣式輸入字段看起來像一個梯形

他們想要一個梯形的輸入字段。

這是我做了什麼至今：

HTML

<input type="text">

CSS

input{ 
    background: #ccc; 
    color: #000; 
    border-bottom: 50px solid #ccc; 
    padding-top:5px; 
    border-left: 20px solid #fff; 
    border-right: 20px solid #fff; 
    height: 0px; 
    width: 200px; 
}

Fiddle

任何想法如何或是否有可能做這樣的事情： this 。

來源

2013-10-21 Newtt

將您的輸入字段放在圖形上並用css隱藏輸入字段的邊框 – Alexxus

事情是這樣的：

<span class="outer"> 
    <span class="inner"> 
    <input type="text" value="test value" /> 
    </span> 
</span> 

.outer { 
    display: inline-block; 
    border-bottom: 34px solid #000; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    height: 0px; 
} 

.inner { 
    display: inline-block; 
    margin: 1px -18px -40px -18px; 
    border-bottom: 32px solid white; 
    border-left: 20px solid transparent; 
    border-right: 20px solid transparent; 
    height: 0px; 
} 

input 
{ 
    background: transparent; 
    border: none; 
    display: inline-block; 
    font-size: 130%; 
}

http://jsfiddle.net/fNCt4/4/

輸入本身不利於形狀。這只是這兩個跨度。你可以使用輸入元素本身作爲內部形狀，但是由於你需要添加標記，所以我認爲你可以添加兩個'通用'梯形助手形狀並保持輸入元素不變。

你需要兩個來僞造邊界。這是必要的，因爲形狀本身是通過添加邊框創建的，所以可見邊框通過將稍小的形狀疊加到另一個上來構造。

其餘的是負邊界的技巧，允許內部形狀定位在外形的邊界上。當然，使用transparent作爲顏色，可以防止內部形狀的「負面空間」覆蓋外部形狀。

來源

2013-10-21 08:02:45 GolezTrol

客戶再次變得複雜！

我建議你使用背景圖像在外部透明的梯形的CSS所以一個PNG。稍微增加頁邊空間，以免用戶在梯形外寫字。

希望這有助於

來源

2013-10-21 07:43:09

這就是我最初想要做的。我可能最終會回到這個。謝謝！ – Newtt

你這裏有兩種選擇

CSS3
圖片作爲背景。

對CSS3選擇看看這個鏈接http://css-tricks.com/examples/ShapesOfCSS/

#trapezoid { 
border-bottom: 100px solid red; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
height: 0; width: 100px; 
}

而是使之向後兼容，我建議你去圖像作爲背景，對CSS3後備。

來源

2013-10-21 07:47:11

這會創建一個實心的梯形而不是梯形的輪廓。 – GolezTrol

樣式輸入字段看起來像一個梯形

回答

相關問題