CSS لإنشاء زاوية منحنية بين عنصرين؟

Question

يحتوي واجهة المستخدم على قائمة غير مرتبة على اليسار. عند تحديد عنصر قائمة ، أ 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>؟ من الواضح ، سأقوم بتضمين CSS Webkit و Mozilla Border CSS أيضًا.

الشيء الرئيسي الذي لست متأكدًا منه هو ذلك الزاوية الخارجية تحت الركن الأيمن السفلي من النشط <li>. لدي بعض الأفكار ، لكنها تبدو مثل الاختراقات. أي اقتراحات؟

نلاحظ أن <ul> يشار إلى الرمادي ، ولكن سيكون أبيض في التصميم الحقيقي. أيضًا ، أخطط لاستخدام JavaScript لوضع <div> بشكل صحيح عند <li> تم الإختيار.

Answer 1

حسنًا ، كما اتضح ، تمكنت من حل المشكلة بنفسي. اخترقت معًا عرضًا تجريبيًا - تحقق من ذلك.

في الأساس ، هناك حاجة إلى العديد من عناصر 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 لأنني اخترقت ذلك معًا. ولكن ربما سيساعد شخص آخر. لقد اختبرت هذا فقط في Google Chrome على Mac OSX.

Answer 2

حل أنظف (كود أقل و سمح التدرج الخلفية)

انظر الكمان (أو اخر) ، الذي يستخدم هذا 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;
}

Answer 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;
}

لأخبرك بالحقيقة ، لست متأكدًا من أنها نسخة أفضل ، فهي تجعل خلفيات التدرج/الصورة سهلة (للاشوف لي ، على الأقل) ولكن لا يمكنك تطبيق خلفية الصورة/التدرج على الجسم. إنه أيضًا "سحر سيء" ، وهو شعور بأنه يعمل بطريقة غير بديهية.

Answer 4

ليس حقا ، آسف ، لكل

عكس الزاوية المستديرة في CSS؟

Answer 5

للقيام بذلك على BG غير الصلبة ، لا أعتقد أنه يمكنك القيام بذلك مع CSS ، ولكن يمكنك استخدام القماش أو SVG لنفس التأثير - وليس بالضبط ما طلبته.

ومع ذلك ، يبدو أن هناك اقتراح نصف قطر الحدود السلبية من شأنه أن يحل المشكلة. ربما يوما ما ، صحيح.

Answer 6

هذا جميل نصف قطر الحدود العكسي في البرنامج التعليمي CSS يمكن أن تفعل الخدعة. يشرح كيفية القيام بنصف قطر الحدود العكسي لعلامات التبويب. ولكن يمكن تكييفه بسهولة لتبسيط CSS الخاص بك لأنه يستخدم :after بدلا من إنشاء الكثير من العناصر الإضافية.