Проектирование закругленных угловых прямоугольников в CSS

Question

Я разрабатываю расписание для компании, которая будет иметь несколько прямоугольников, уложенных вертикально вниз, но я понятия не имею, как изменить свойства прямоугольника, так как я действительно плохо разбираюсь в дизайне пользовательские фигуры в CSS. Я смог сделать прямоугольник с правой границей here.

Вот CSS, который я использовал, чтобы нарисовать прямоугольник:

#box { 
    border:10px solid #000; 
    border-radius: 10px 40px 40px 10px; 
    width: 200px; 
    height: 100px; 
    background-color:#ccc; 
} 

До сих пор, у меня есть основания, но я понятия не имею, как спроектировать пользовательский прямоугольник с исчезающим участком на линии границы и еще одна линия идет вниз. В конце концов, я хочу, чтобы выглядеть следующим образом:

Может кто-нибудь помочь мне дизайн даже 2 из этих пользовательских прямоугольника с помощью CSS. Я был бы очень благодарен за это, поскольку я могу продолжить разработку с помощью базового пользовательского прямоугольника. Спасибо, парни!

Answer 1

Здесь я сделал страницу в соответствии с изображением, размещенной здесь. Проверьте Demo.

span { 
    font-size: 20px; 
    background: #fff; 
    position:absolute; 
    top: -20px; 
    right: 70px; 
    padding:4px; 
} 
p{ 
    border-radius: 25px; 
    width: 250px; 
    height: 150px; 
    border:10px solid #000; 
    background-color:white; 
    position:relative; 
    padding-top:15px; 
} 

p:after{ 
position:absolute; 
content: " "; 
    width:50px; 
    height:50px; 
    border-right:10px solid #000; 
    right:18px; 
    bottom:-55px; 
    } 
p:last-child:after{border-right:0;} 

/HTML код будет как этот/

<div id="box"> 
<p><span>Title will come here</span>so far, I have a base, but I have no idea how to customly design the rectangle with dissapearing section on the border lines and another line going down, the way I want it like this:</p> 
     <p><span>Title will come here</span>so far, I have a base, but I have no idea how to customly design the rectangle with dissapearing section on the border lines and another line going down, the way I want it like this:</p> 
     <p>><span>Title will come here</span>so far, I have a base, but I have no idea how to customly design the rectangle with dissapearing section on the border lines and another line going down, the way I want it like this:</p> 
</div> 

Answer 2

что вам нужно, что-то вроде этого ???

Html

<div id="box"> 
    <h1>title goes here</h1> 
    <p>Hello</p> 
</div> 

CSS

#box{ 
    border:10px solid #000; 
    border-radius: 20px; 
    width: 200px; 
    height: 100px; 
    background-color:#fff; 
} 
h1 { 
    font-size: 20px; 
    background: #fff; 
    position: relative; 
    top: -30px; 
    right: -10px; 
    display: inline-block; 
} 

demo

EDIT

для вашего второго вопроса, то вы можете сделать что-то вроде этого, не используя образы,

DEMO

Answer 3

Как об этом месте: ДИВ за другой три впереди и дать ему границы -Верно собственности. Затем дайте другим трем z-индексам выше 1. Наконец, дайте заголовкам каждого из трех полей значение zindex выше последнего. Также старайтесь не указывать высоту ящиков, но вместо этого вместо этого надпись не будет переполнять окно. Вот некоторые из CSS (потребуется тонкой настройки):

/*the container behind the boxes*/ 
    #cont{background-color:transparent; 
     height:/*whatever height*/; 
     width:/*whatever width*/; 
     border-right:5px solid black;} 



    #box{ 
     background-color:white; 
     border-radius: 10px; 
     position:relative; 
     z-index:2; 
    } 

    #time{ 
    position:relative; 
    z-index:3; 
    } 

Это самый простой способ ... Если вы не понимаете этого, то сделать некоторые учебники! это вам очень поможет! ИМЕЮТ благодетель;) Work in editfy with a live preview!