30

私の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 borderradiusCSSも含めます。

私がよくわからない主なことは、アクティブの右下隅の下にある外側の隅<li>です。私にはいくつかのアイデアがありますが、それらはハックのようです。助言がありますか？

<ul>は灰色で示されていますが、実際のデザインでは白になっていることに注意してください。また、Javascriptを使用して、が選択された<div>ときに正しく配置することを計画しています。<li>

4

6 に答える 6

11

結局のところ、私は自分で問題を解決することができました。私は一緒にデモをハックしました -それをチェックしてください。

基本的に、いくつかの追加の 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 でのみテストしました。

于 2011-01-05T11:07:44.790 に答える
8

よりクリーンなソリューション（許可されるコードとバックグラウンドグラデーションが少ない）

この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;
}
于 2012-07-14T15:06:43.077 に答える
3

より少ないマークアップを必要とする解決策を思いつきました。要約すると、マージンを使用する代わりに、白い丸い境界線を使用し、アクティブな li を白い丸い境界線の後ろに配置して、境界半径の反転効果を実現します。

http://jsfiddle.net/zrMW8/

<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 の場合) が、画像/グラデーションの背景をボディに適用することはできません。また、直感的でない方法で機能するという意味での「悪い魔法」でもあります。

于 2011-01-07T03:26:10.727 に答える
0

本当に、申し訳ありませんが、

CSSで丸みを帯びた角を反転しますか？

于 2011-01-05T06:17:04.487 に答える
0

固体でない bg でこれを行うには、CSS でそれを行うことはできないと思いますが、canvas または SVG を使用して同じ効果を得ることができます。

ただし、問題を解決する負の境界半径の提案があるようです。たぶんいつか、そうです。

于 2011-01-05T15:49:20.530 に答える
0

CSS チュートリアルのこの素敵なInverse Border Radiusは、そのトリックを行うことができます。タブの境界線半径を逆にする方法について説明します。:afterただし、あまりにも多くの余分な要素を作成する代わりに使用するため、css を合理化するために簡単に適応させることができます。

于 2012-07-14T12:41:55.567 に答える