HTML - внутренний закругленные 2 элементы

Я искал вокруг, но не смогли найти способ сделать т «внутренний» закругленные углы в «L», как элементHTML - внутренний закругленные 2 элементы

В настоящее время у меня есть что-то вроде следующего:

#container { 
 
    width: 800px; 
 
    display: block; 
 
    background: white; 
 
} 
 
#a { 
 
    background: black; 
 
    color: white; 
 
    float: left; 
 
    word-wrap: break-word; 
 
    width: 150px; 
 
    border-radius: 5px; 
 
    padding: 2px; 
 
    margin: 2px; 
 
} 
 
#b { 
 
    background: black; 
 
    color: white; 
 
    float: left; 
 
    border-radius: 5px; 
 
    padding: 2px 2px 2px 14px; 
 
    margin: 2px 2px 2px -8px; 
 
} 
 
#c { 
 
    background: black; 
 
    color: white; 
 
    float: right; 
 
    width: calc(100% - 166px); 
 
    border-radius: 5px; 
 
    padding: 2px; 
 
    margin: 2px; 
 
}

<div id="container"> 
 
    <div id="a"> 
 
    WWWWWWWWWWWW 
 
    <br/>WWWWWWWWWWWW 
 
    <br/>WWWWWWWWWWWW 
 
    <br/> 
 
    </div> 
 
    <div id="b"> 
 
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM 
 
    <br/>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM 
 
    </div> 
 
    <div id="c"> 
 
    OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/> 
 
    </div> 
 
    <div style="clear:both"></div> 
 
</div>

Проблема приходит, что «внутренний угол» является 90º, и я хочу, закругленный угол, есть ли способ для достижения этой цели 90º угол, чтобы быть закруглены, как и остальные?

должны иметь в виду, что все цвета фона/изображения можно изменить (#a и #b всегда будут одни и те же цвета) и все текстовые длины переменной так #a может иметь меньше или равные линии, чем #b.

Есть ли способ сделать это?

И есть ли способ удалить <div style="clear:both"></div> и иметь контейнер для хранения всех элементов внутри или что-то абсолютно необходимо?

источник

2015-05-02 user1090694

Это не совсем ясно для меня, что вы пытаетесь сделать, но я ** подумайте, что вы пытаетесь сделать два div, которые ** касаются **, кажутся втекающими друг в друга с радиусом угла на ** вне ** соединения ... это что? ** ** ** здесь было бы идеально. –

немного изменил код, чтобы его можно было запустить без полноэкранного режима, там вы можете видеть, что в элементах a и b есть угол 90 градусов, и я хочу сделать его округленным. – user1090694

Вот одна идея [** Round Out Borders **] (https://css-tricks.com/tabs-with-round-out-borders/) –

Маленький Hacky метод использование box-shadow для #c и псевдо элемента #b для добавления right стороны изогнутой

#container { 
 
    width: 800px; 
 
    display: block; 
 
    background: white; 
 
} 
 
#a { 
 
    background: black; 
 
    color: white; 
 
    float: left; 
 
    word-wrap: break-word; 
 
    width: 150px; 
 
    border-radius: 5px; 
 
    padding: 2px; 
 
    margin: 2px; 
 
} 
 
#b { 
 
    background: black; 
 
    color: white; 
 
    float: left; 
 
    border-radius: 5px; 
 
    padding: 2px 2px 8px 14px; 
 
    margin: 2px 2px 2px -8px; 
 
    position: relative; 
 
} 
 
#b:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 7px; 
 
    right: -6px; 
 
    width: 10px; 
 
    background: red; 
 
    border-radius: 0 5px 5px 0; 
 
} 
 
#c { 
 
    background: black; 
 
    color: white; 
 
    float: right; 
 
    width: calc(100% - 166px); 
 
    border-radius: 5px; 
 
    padding: 2px; 
 
    margin: 2px; 
 
    box-shadow: 0px 0px 0px 4px green; 
 
    position: relative; 
 
    top: -7px; 
 
}

<div id="container"> 
 
    <div id="a"> 
 
    WWWWWWWWWWWW 
 
    <br/>WWWWWWWWWWWW 
 
    <br/>WWWWWWWWWWWW 
 
    <br/> 
 
    </div> 
 
    <div id="b"> 
 
    MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM 
 
    <br/>MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM 
 
    </div> 
 
    <div id="c"> 
 
    OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/>OOOOOOOOOOOO 
 
    <br/> 
 
    </div> 
 
    <div style="clear:both"></div> 
 
</div>

источник

2015-05-02 10:23:27

не совсем то, что я искал, но я полагаю, что буду использовать трюк, подобный этому (кажется, проще, чем сферические) и был более или менее оригинальной идеей, которую я имел (но это не позволяет иметь фоновое изображение) – user1090694

HTML - внутренний закругленные 2 элементы

ответ

Смежные вопросы