2 つの要素の間に曲線の角を作成する CSS はありますか?
-
25-09-2019 - |
質問
私の UI の左側には順序なしのリストがあります。リスト項目が選択されると、 div
その右側に表示されます。曲がったものを希望します 外側の角 どこ <li>
そしてその <div>
会う。これをこう呼ぶ人もいます 負の境界半径 または 逆コーナー. 。下の画像の白い矢印を参照してください。
青を伸ばすには <li>
の端まで <ul>
, 次のようなことを計画しています。
li {
right-margin: 2em;
border-radius: 8px;
}
li.active {
right-margin: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
を延長するより良い方法はありますか <li>
の端まで <ul>
?当然、Webkit と mozilla border radius CSS も含めます。
私が主に確信していないのは、 外側の角 アクティブなファイルの右下隅の下 <li>
. 。アイデアはいくつかありますが、ハックのように思えます。助言がありますか?
注意してください。 <ul>
グレーで表示されていますが、実際のデザインでは白になります。また、JavaScript を使用して、 <div>
正しく <li>
が選択されます。
解決
まあ、結局のところ、私は自分で問題を解決することができました。デモをハッキングしてみました -- それをチェックしてください.
基本的に、いくつかの追加の DOM 要素とかなりの量の CSS が必要です。@Steve が提供するリンクで述べたように、しっかりした背景が必要です。グラデーションの背景やその他のパターンでこれを行う方法はないと思います。
最終的には次のような HTML になりました。
ul.selectable {
padding-top: 1em;
padding-bottom: 1em;
width: 50%;
float: left;
}
ul.selectable li {
margin: 0 3em 0 4em;
border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
}
ul.selectable li.active {
margin-right: 0;
}
ul.selectable li.active dl {
background-color: #4f9ddf;
}
ul.selectable li dt {
background-color: #dfd24f;
padding: 1em;
margin-left: -2em;
margin-right: -2em;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
ul.selectable li dd {
padding: 0.25em;
background-color: #fff;
}
ul.selectable li.active dt {
background-color: #4f9ddf;
margin-right: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-khtml-border-top-right-radius: 0;
-khtml-border-bottom-right-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
ul.selectable li.active dd.top {
-webkit-border-bottom-right-radius: 8px;
-khtml-border-bottom-right-radius: 8px;
-moz-border-radius-bottomright: 8px;
border-bottom-right-radius: 8px;
}
ul.selectable li.active dd.bot {
-webkit-border-top-right-radius: 8px;
-khtml-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
}
div.right {
float: left;
padding-top: 3em;
width: 50%;
}
div.content {
height: 15em;
width: 80%;
background-color: #4f9ddf;
padding: 1em;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
<ul class="selectable">
<li>
<dl>
<dd class="top"></dd>
<dt>Title</dt>
<dd class="bot"></dd>
</dl>
</li>
<li class="active">
<dl>
<dd class="top"></dd>
<dt>Title</dt>
<dd class="bot"></dd>
</dl>
</li>
<li>
<dl>
<dd class="top"></dd>
<dt>Title</dt>
<dd class="bot"></dd>
</dl>
</li>
</ul>
<div class="right">
<div class="content">This is content</div>
</div>
CSS はハックしただけなので最適化していません。しかし、おそらくそれは他の誰かを助けるでしょう。私はこれを Mac OSX 上の Google Chrome でのみテストしました。
他のヒント
クリーナーソリューション(コードが少ない& 許可されている背景グラデーション)
フィドルを参照してください (また 別)、このHTMLを使用しています:
<ul class="selectable">
<li>Title</li>
<li class="active">Title</li>
<li>Title</li>
<li>Title</li>
</ul>
<div class="right">
<div class="content">This is content</div>
</div>
そしてこのCSS(重要なのは border-radius
と border-width
擬似要素で、あなたのために逆の円を作る。省略しました gradient
コード。):
ul.selectable {
padding-top: 1em;
padding-bottom: 1em;
width: 50%;
float: left;
}
ul.selectable li {
margin: 1em 1em 1em 2em;
padding: 1em;
border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
background-color: #dfd24f;
position: relative;
}
ul.selectable li.active {
margin-right: 0;
background-color: #4f9ddf;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-khtml-border-top-right-radius: 0;
-khtml-border-bottom-right-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
ul.selectable li.active:before,
ul.selectable li.active:after {
content: '';
position: absolute;
left: 100%; /* I use this instead of right: 0 to avoid 1px rounding errors */
margin-left: -8px; /* I use this because I am using left: 100% */
width: 8px;
height: 8px;
border-right: 8px solid #4f9ddf;
z-index: -1;
}
ul.selectable li.active:before {
top: -8px;
border-bottom: 8px solid #4f9ddf;
-webkit-border-bottom-right-radius: 16px;
-khtml-border-bottom-right-radius: 16px;
-moz-border-radius-bottomright: 16px;
border-bottom-right-radius: 16px;
}
ul.selectable li.active:after {
bottom: -8px;
border-top: 8px solid #4f9ddf;
-webkit-border-top-right-radius: 16px;
-khtml-border-top-right-radius: 16px;
-moz-border-radius-topright: 16px;
border-top-right-radius: 16px;
}
div.right {
float: left;
padding-top: 3em;
width: 50%;
}
div.content {
height: 15em;
width: 80%;
background-color: #4f9ddf;
padding: 1em;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
より少ないマークアップを必要とするソリューションを思いつきました。要約すると、マージンを使用する代わりに、白い丸い境界線を使用し、アクティブなLiを白い丸い境界の後ろに配置して、逆境界線様体効果を達成します。
<ul class="selectable">
<li>
<a href="#">Title</a>
</li>
<li class="active">
<a href="#">Title</a>
</li>
<li>
<a href="#">Title</a>
</li>
<li>
<a href="#">Title</a>
</li>
</ul>
<div class="right">
<div class="content">This is content</div>
</div>
また、CSSも少なくなります! (これはマインドベンディングです):
a { color: #000; text-decoration: none;}
ul.selectable {
padding: 1em 1em;
width: 40%;
float: left;
}
ul.selectable li {
margin: -1em 0 0 0;
border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border: solid #fff 1em;
position: relative;
}
ul.selectable li a {
background-color: #dfd24f;
padding: 1em;
display: block;
border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
}
ul.selectable li.active {
margin: -1em -1em -1em 1em;
border: solid #4f9ddf 1em;
border-left: solid #fff 1em;
background-color: #4f9ddf;
position: static;
}
ul.selectable li.active a {
margin: 0 0 0 -1em;
border-left: solid #4f9ddf 1em;
background-color: #4f9ddf;
position: static;
text-indent: -1em;
}
div.right {
float: left;
padding-top: 3em;
width: 50%;
margin-left: -1em;
}
div.content {
height: 15em;
width: 80%;
background-color: #4f9ddf;
padding: 1em;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
真実を伝えるために、それがより良いバージョンであるかどうかはわかりませんが、グラデーション/画像の背景を簡単にします(少なくともアクティブなLIの場合は)が、画像/勾配の背景を身体に適用することはできません。それはまた、それが直感的ではない方法で機能するという感覚で「悪い魔法」です。
本当に、申し訳ありませんが、
非固体BGでこれを行うために、CSSでそれを行うことはできないと思いますが、CanvasまたはSVGを同じ効果で使用することができます - ただし、正確に求めたものではありません。
ただし、aがあります 負の境界半径の提案 それは問題を解決するでしょう。多分いつか、そうです。
これはいいです CSSチュートリアルの逆境界半径 トリックをすることができます。タブの逆境界半径を実行する方法を説明します。しかし、それはあなたのCSSを使用するので、あなたのCSSを合理化するために簡単に適応することができます :after
余分な要素が多すぎる代わりに。