CSS U形或曲線邊框

我有關於CSS（3）邊框的問題。CSS U形或曲線邊框

我試圖變換輸入文本字段給它U形邊界。左右邊界應該有50％的高度。

這意味着左上角，右上角和上邊界應該是透明的。

困難的部分是以下要求：

它不應與重疊的元素，以掩蓋的頂部部分（這樣的附加元件和僞像的元件來解決：不是後：與前溶液
它應該在純粹的CSS（無JavaScript庫）
的HIGHT應該是高度的50％

我試圖與邊界圖像和線性漸變的組合來解決這個問題，但沒有成功

是否有人對這個問題的解決方案？

謝謝！

P.s.對不起，不張貼例如圖像，但＃1不會讓我...

來源

2014-09-19 Bas

對不起，我的問題說法是不完整，我忘了提及左右邊界的50％高度 – Bas 2014-09-20 22:38:13

這是一件看起來像一個U，純CSS僅
DEMO

div{ 
height:100px; 
width:100px; 
border:1px solid black; 
border-top: 0px; 
border-radius: 0px 0px 45px 45px; 
}

這就是我從您的瞭解問題，如果它不是你想要更多的啓發我

來源

2014-09-19 17:41:04 Amine

對不起，我的問題陳述並未完成，我忘記提及左右邊界的50％高度 – Bas 2014-09-22 07:27:44

此問題已發佈太多次，[**可能重複**]（http://stackoverflow.com/questions/8804417/css-border-where-only-half-of-a-border-is-visible ）和[** Here **]（http://stackoverflow.com/questions/8808099/css-set-border-to-half-width）這是不可能的風格化一半的邊界，除非你使用圖像，你可以添加一個div元素作爲掩碼來隱藏你的一半邊框 – Amine 2014-09-22 15:37:49

正如問題中所描述的：一個掩碼/重疊元素不是解決方案 – Bas 2014-09-22 19:36:19

你可以使用border-left-left-radius：50％;和邊界右下半徑：50％;在一個div上創建一個u形。

一個例子：

HTML

<div class="u-shape"></div>

CSS

.u-shape { 
    border-bottom-left-radius: 50%; 
    border-bottom-right-radius: 50%; 
    height: 300px; 
    width: 50px; 
}

如果你想添加邊框它來創建U形，只是給邊框的右側，左側和底側，如下所示：

CSS

.u-shape { 
    border-left: 2px solid #000; 
    border-right: 2px solid #000; 
    border-bottom: 2px solid #000; 
}

來源

2014-09-19 17:41:57 meniltiac

對不起，我的問題語句wasn沒有完成，我忘了提及左右邊界的50％高度 – Bas 2014-09-22 07:28:46

哎呀對不起你們，

簡單

border-bottom: 1px solid black; 
border-bottom-left-radius: 10px; 
border-bottom-right-radius: 10px;

有你的左側，右側和頂部邊框透明的時候就已經做的伎倆。

不過，感謝您的快速響應！

來源

2014-09-22 07:45:47 Bas

也許這就是你需要在半徑

多個％的會更加大圈取決於你喜歡

div{ 
 
    height:90%; 
 
    width:90%; 
 
    border:1px solid black; 
 
    border-top: 0px; 
 
    padding:2% 8% 20% 8%; 
 
    border-radius: 0px 0px 50% 50%; 
 
}

<div>The Roman and Han empires saw an exchange of trade goods, information, and occasional travelers, as did the later Eastern Roman Empire and various Chinese dynasties. These empires inched progressively closer in the course of the Roman expansion into the ancient Near East and simultaneous Han Chinese military incursions into Central Asia. Mutual awareness remained low and firm knowledge about each other was limited. Only a few attempts at direct contact are known from records. Several alleged Roman emissaries to China were recorded by ancient Chinese historians. The indirect exchange of goods along the Silk Road and sea routes included Chinese silk, Roman glassware (example pictured) and high-quality cloth. Roman coins minted since the 1st century AD have been found in China. A coin of Maximian and medallions from the reigns of Antoninus Pius and Marcus Aurelius were found in Vietnam. Roman glasswares and silverwares have been discovered at Chinese archaeological sites dated to the Han period. Roman coins and glass beads have also been found in Japan.</div>

來源

2017-04-18 15:34:16

CSS U形或曲線邊框

回答

相關問題