2016-06-23 2 views
0

imgの例として尖ったborder-radiusを作成するにはどうすればよいですか? 私は右または左に完全な矢印を作るいくつかの方法を見つけましたが、私は1pxの境界だけを必要とします。 enter image description hereリスト内の罫線の尖った点

私はこれをULとLIより構築しました。これは、この "ブレッドクラム"を生成するための最良の方法だと私は思うからです。

<ul> 
    <li>Back</li> 
    <li>Home</li> 
    <li>Events</li> 
    <li>Event Item</li> 
</ul> 
+1

あなたが、少なくとも自分のためにこれをコーディングすることを試みることが期待されます。スタックオーバーフローはコードを書くサービスではありません。私はあなたがGoogleを介して、またはSOを検索することによって、いくつかの追加の研究を行い、試してみることを提案します。それでも問題が解決しない場合は、**あなたのコード**に戻って、あなたが試したこととそれがうまくいかなかった理由を説明してください。 –

+0

私はこれを行うには本当にトリッキーでハッピーな方法を考えることができます。あなたが興味を持っているのなら、クリエイティブなものです。http://stackoverflow.com/questions/12041938/how-to-create-a-triangle-in-css3-using-border-radius – casraf

答えて

2

あなたはborder-radiusを使用してそれを行うことはできません、あなたは:after:before擬似要素を使用する必要があります。

他の方法もありますが、これは私が個人的に使用する方法の1つです。

.breadcrumb { 
 
\t list-style: none; 
 
\t overflow: hidden; 
 
\t font: 18px Helvetica, Arial, Sans-Serif; 
 
} 
 
.breadcrumb li { 
 
\t float: left; 
 
} 
 
.breadcrumb li a { 
 
\t color: white; 
 
\t text-decoration: none; 
 
\t padding: 10px 0 10px 65px; 
 
\t 
 
\t background: #03C9A9; 
 
\t position: relative; 
 
\t display: block; 
 
\t float: left; 
 
} 
 
.breadcrumb li a:after { 
 
\t content: " "; 
 
\t display: block; 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-top: 50px solid transparent; 
 
\t border-bottom: 50px solid transparent; 
 
\t border-left: 30px solid #03C9A9; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t margin-top: -50px; 
 
\t left: 100%; 
 
\t z-index: 2; 
 
} 
 

 
.breadcrumb li a:before { 
 
\t content: " "; 
 
\t display: block; 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-top: 50px solid transparent;  
 
\t border-bottom: 50px solid transparent; 
 
\t border-left: 30px solid white; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t margin-top: -50px; 
 
\t margin-left: 1px; 
 
\t left: 100%; 
 
\t z-index: 1; 
 
}
<ul class="breadcrumb"> 
 
\t <li><a href="#">item1</a></li> 
 
\t <li><a href="#">item2</a></li> 
 
\t <li><a href="#">item3</a></li> 
 
\t 
 
</ul>