CSS 3：透明方形切角（文字）輸入元素如何？

對於一個項目，我必須削減（各種）輸入元素的邊緣，因爲這是網站設計的一部分。由於背景在不同的屏幕尺寸上可能有所不同，因此邊緣必須透明地切割，這意味着您必須看到切割邊緣的下方元素的背景。CSS 3：透明方形切角（文字）輸入元素如何？

這是我必須做到：

隨着圓角我會做到以下幾點：

div { 
 
    padding:30px; 
 
    background-color:#c11; 
 
} 
 

 
input { 
 
    display:block; 
 
    border-top-right-radius:10px; 
 
    border-bottom-left-radius:10px; 
 
    background-color:#fff; 
 
    border:0; 
 
    height:30px; 
 
    width:300px; 
 
    padding:3px 10px; 
 
}

<div> 
 
<input type="text" placeholder="Search ..." /> 
 
</div>

但是我不知道如何做這個方形切割。你知道一個方法嗎？

來源

2017-06-14 Blackbam

你打算什麼瀏覽器支持？ –

其o.k.如果只支持最新版本的Chrome，Firefox和Edge。 – Blackbam

使用邊界創建「css三角形」（研究關鍵字）的常用方法應該可以在這裏使用，但也有其他幾種可能的方式（背景圖像，SVG蒙版，clippath，...） – CBroe

最簡單的方法是添加在每一端一個div和編輯他們的邊界。通過這種方式，您的搜索...佔位符不會超出界限，您可以在結束跨度之前添加一個按鈕作爲搜索圖標。

.back { 
 
    padding:30px; 
 
    background-color:#c11; 
 
} 
 
.bottom-corner, input, .top-corner, .icon{ 
 
    display:inline-block; 
 
    padding:3px 10px; 
 
    vertical-align:middle; 
 
} 
 
.icon{ 
 
    background-color:#fff; 
 
    padding-top:10px; 
 
    height:23px; 
 
} 
 
.bottom-corner, .top-corner{ 
 
    height: 20px; 
 
} 
 
.bottom-corner{ 
 
    border-bottom: 10px solid transparent; 
 
    border-right: 10px solid #fff; 
 
    margin-right: -4px; 
 
} 
 
.top-corner{ 
 
    margin-left:-4px; 
 
    border-top: 10px solid transparent; 
 
    border-left: 10px solid #fff; 
 
} 
 
input { 
 
    background-color:#fff; 
 
    border:0; 
 
    height:30px; 
 
    width:300px; 
 
}

<div class="back"> 
 
<div class="bottom-corner"></div> 
 
<input type="text" placeholder="Search ..." /><div class="icon">S</div> 
 
<div class="top-corner"></div> 
 
</div>

來源

2017-06-14 12:43:51

@PaigeMeinke - 它實際上是一個很好的解決方案。您可以用僞元素替換您使用過的元素。 –

如果您的目標瀏覽器支持，您可以使用剪輯路徑。路徑可以使用百分比來定義，所以它可以適合任何屏幕尺寸。但是，Edge尚未支持。

使用Clippy創建路徑更容易。

div { 
 
    padding: 30px; 
 
    background: linear-gradient(45deg, #c11, blue); 
 
} 
 

 
input { 
 
    display: block; 
 
    -webkit-clip-path: polygon(calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px), 0 0); 
 
    clip-path: polygon(calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px), 0 0); 
 
    background-color: #fff; 
 
    border: 0; 
 
    height: 30px; 
 
    width: 300px; 
 
    padding: 3px 10px; 
 
}

<div> 
 
    <input type="text" placeholder="Search ..." /> 
 
</div>

來源

2017-06-14 12:38:56

這不適用於mozilla –

[我可以使用]（http://caniuse.com/#search=clip-path）說它可以。 –

它在mac上無法在mozilla @ 53.0.3（64位）上工作 –

一個更好的辦法是使用邊界

它將支持所有瀏覽器。

見https://jsfiddle.net/kndx9od8/

div.outer { 
 
    padding: 30px; 
 
    background-color: #c11; 
 
} 
 

 
div.con:after { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    border-bottom: 13px solid #c11; 
 
    border-right: 14px solid transparent; 
 
} 
 

 
div.con:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    border-top: 13px solid #c11; 
 
    border-left: 14px solid transparent; 
 
} 
 

 
div.con { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 

 
input { 
 
    display: block; 
 
    background-color: #fff; 
 
    border: 0; 
 
    height: 30px; 
 
    width: 300px; 
 
    padding: 3px 10px; 
 
}

<div class="outer"> 
 
    <div class="con"> 
 
    <input type="text" placeholder="Search ..." /> 
 
    </div> 
 
</div>

來源

2017-06-14 12:40:10

只是一個建議：也許使用div而不是跨度？因爲一些瀏覽器不允許跨內部的非內聯元素（輸入是內聯塊）（[source]（https://stackoverflow.com/questions/11314668/what-elements-can-a-span-tag-contain -in-html5））他們可能會渲染它，但只是爲了有效的HTML。 –

是的你是對的，但你不覺得'顯示：內聯塊;'跨度將做的工作 –

這將工作，是的，但語義是錯誤的。這就像在h1內部放置一個div。它可以工作，但它是無效的。 –

這裏是另一種選擇，使用transform: skew()和僞元素

它適用於所有的背景，有一個簡單而容易改變的代碼，是頗具動感太，當談到以不同的寬度/高度input。

div { 
 
    padding:30px; 
 
    background-color:#c11; 
 
    background: linear-gradient(to right, darkred, #c11); 
 
} 
 
input { 
 
    display:block; 
 
    background-color:#fff; 
 
    border:0; 
 
    height:30px; 
 
    width:300px; 
 
    padding:3px 0px; 
 
    outline: none; 
 
} 
 

 
div:nth-child(2) input { 
 
    width: 400px; 
 
    height:40px; 
 
    font-size: 25px; 
 
} 
 

 
/* cut corners */ 
 
span { 
 
    position: relative; 
 
    display: inline-block; 
 
    padding: 0 15px; 
 
    overflow: hidden; 
 
} 
 
span::before, 
 
span::after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; top: 0; 
 
    width: 15px; bottom: 0; 
 
    background-color: white; 
 
    transform: skewY(45deg); 
 
    transform-origin: right top; 
 
} 
 
span::after { 
 
    left: auto; right: 0; 
 
    transform-origin: left top; 
 
}

<div> 
 
    <span> 
 
    <input type="text" placeholder="Search ..." /> 
 
    </span> 
 
</div> 
 

 
<div> 
 
    <span> 
 
    <input type="text" placeholder="Search ..." /> 
 
    </span> 
 
</div>

來源

2017-06-14 13:40:35 LGSon

這也是一個不錯的+1 – Blackbam

CSS 3：透明方形切角（文字）輸入元素如何？

回答

相關問題