丸みを帯びたボーダーコーナー

下の図の赤い線のように上の境界線を作る方法については疑問に思っていますか？私はborder-radiusを試しましたが、上ボーダーの底部をどのように丸くするかわかりません。丸みを帯びたボーダーコーナー

2016-04-25 Kristó Zsolt

あなたがしようとしているかを示します – Mostafiz

それはだけなので、空の要素が不必要に冗長になり持つ、プレゼンテーションのために使用されているように私は、あなたがスタイルをすることができます擬似要素を作成するために:beforeを使用します。ここで

はこれを行うことができる方法の例です。また、JSビンに取り組んで見ることができます

.splitter { 
 
    border: 1px solid #ddd; 
 
    border-top: 0; 
 
} 
 
    .splitter:before { 
 
    content: ' '; 
 
    display: block; 
 
    position: relative; 
 
    top: -5px; 
 
    width: 100%; 
 
    height: 8px; 
 
    background-color: red; 
 
    border-radius: 100px/70px; 
 
    } 
 

 
.myContent { 
 
    padding: 0 20px; 
 
}

<div class="splitter"> 
 
    <div class="myContent"> 
 
    <h1>React or Angular</h1> 
 
    <p>Lorem ipsum Mollit qui sunt consequat deserunt exercitation veniam.</p> 
 
    </div> 
 
</div>

：

http://jsbin.com/hoqizajada/edit?html,css,output

出典

2016-04-25 11:12:00 ashleynolan

-1

私はそれが単一のdivでは不可能だと思います。しかし、divを上に置き、border-radiusでトリックすることができます。

.inbox { 
 
    width: 200px; 
 
} 
 
#top-border { 
 
    border: red 4px solid; 
 
    border-radius: 4px; 
 
} 
 
#test{ 
 
    padding: 4px; 
 
    height: 200px; 
 
    background: #EEEEEE; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div id="top-border" class="inbox"></div> 
 
    <div id="test" class="inbox"></div> 
 
</body> 
 
</html>

JSBIN：ここ

出典

2016-04-25 10:42:21 modiX

-1

http://jsbin.com/pofolanuje/edit?html,css,outputは完全なコードで、これはあなたを助け願っています。

.container{ 
 
    width:320px; 
 
    height:520px; 
 
    background:#fff; 
 
    -webkit-border-radius: 5px; 
 
-moz-border-radius: 5px; 
 
border-radius: 5px; 
 
border:1px solid #e4e4e4; 
 
} 
 
.border-red{ 
 
    background:red; 
 
    width:100%; 
 
    height:10px; 
 
-webkit-border-radius: 5px; 
 
-moz-border-radius: 5px; 
 
border-radius: 5px; 
 
}

<div class="container"> 
 
<div class="border-red"> 
 

 
</div> 
 
</div>

出典

2016-04-25 10:48:00

丸みを帯びたボーダーコーナー

答えて

関連する問題