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

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

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

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

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

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

3 ответа

Здесь я сделал страницу в соответствии с изображением, которое вы разместили здесь. Проверьте демонстрацию.

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>


Как насчет этого: поместите div позади трех других впереди и дайте ему свойство границы -right. Затем дайте другим трем 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;
 }

Это самый простой способ... Если вы этого не понимаете, то сделайте несколько уроков! это вам очень поможет! ХОРОШЕЕ;)Работайте в editfy с живым превью!


что вам нужно?

Html

<div id="box">
 <h2>title goes here</h2>
 <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

licensed under cc by-sa 3.0 with attribution.