- радиус на страните
WT форуми -> HTML / Javascript / CSS -> радиус на страните
Създайте нова тема Напишете отговор 
Автор Съобщение
obqvi_in
Нов
Нов

Регистриран на: 18/04/2012 7:24 pm

Support: 0
Bonus: 0
Мнения: 148
Мнение 06/03/2018 6:38 pm     радиус на страните Отговорете с цитат


CSS code:
/***** FIRST CREATE THE BUBBLE ****/
.form {
top: 100px;
position:relative; /*see the support section below for more info*/
width:1000px;
height: 500px; /*size of the bubble*/
background:#D3D3D3; /*same as the container background*/
padding:15px;
margin:20px 0 40px 40px;
color:#333;
/*add the bubble outline*/
border:3px solid #616161;
/*give the bubble curved corners*/
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:40px;
-webkit-box-shadow: 9px 7px 14px 0px rgba(51, 55, 48, 0.6Cool;
-moz-box-shadow: 9px 7px 14px 0px rgba(51, 55, 48, 0.6Cool;
box-shadow: 9px 7px 14px 0px rgba(51, 55, 48, 0.6Cool;
}
/***** CREATE THE TRIANGLE *****/
.form:before {
content:"";
position:absolute; /*see the support section below for more info*/
top:-110px; /* value = -(border-top-width) - (border-bottom-width) in this case -(0px - 35px)= -35px*/
right:100px; /*horizontal position of the triangle*/
border-width:0px 110px 110px; /*size of the traingle*/
border-style:solid;
border-color: #616161 transparent; /*colour should be the same as bubble border set above*/
display:block;
}
/*****FINALLY MAKE THE CENTRE OF THE TRIANGLE TRANPARENT****/
.form:after {
content:"";
position:absolute; /*see the support section below for more info*/
top:-105px; /* value = -(border-top-width - border-bottom-width) */
right:103px; /* value = (:before left) + (:before border-left) - (:after border-left) */
border-width:0px 107px 107px;
border-style:solid;
border-color:#D3D3D3 transparent; /*colour should be the same as the container background*/
display:block;
}

Как да вдлъбна навътре двете страни горе на триъгълника. Може би не е точната дума 'вдлъбна', но за това се сетих с радиус или нещо подобно или с два кръга, но не знам как. Благодаря на всички!
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
deam0n
Tourist Defender

Регистриран на: 01/10/2005 6:33 pm

Support: 199
Bonus: 951
Мнения: 2966
Мнение 06/03/2018 11:17 pm      Отговорете с цитат


здравей,

хаха ако правилно съм те разбрал какво искаш да направиш можеш да завъртиш елементите и да им занулиш top-a за да застанат пак върху div-а.

CSS code:
.form:before {
transform: rotate(180deg);
top: 0px;
}

// и

.form:after {
transform: rotate(180deg);
top: 0px;
}


Можеш да добавиш и z-index на .form:before, за да застане пред другите елементи и да се вижда тъмно сивото.

CSS code:

.form:before {
z-index: 2;
}


Не знам до колко това е правилен подход, но сигурно няма да имаш проблем с модерните браузъри.

https://codepen.io/anon/pen/YemGbY

Ако това е резултата който искаш да постигнеш можеш да използваш и картинка прозрачна картинка с триъгълниче позиционирана с background-position на главние елемент.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение Посетете сайта на потребителя
obqvi_in
Нов
Нов

Регистриран на: 18/04/2012 7:24 pm

Support: 0
Bonus: 0
Мнения: 148
Мнение 07/03/2018 7:58 pm      Отговорете с цитат


Знаех си, че не съм обяснил както трябва ще ти пратя линк със снимка на нещо подобноhttps://www.123rf.com/photo_5441751_two-vector-glossy-chat-box-in-blue-and-ink.html
Двете страни да са извити може да не точно както е на картинката, може и двете да са навътре.
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Покажи мнения от преди:    
Създайте нова тема   Напишете отговор    web-tourist.net Форуми -> HTML / Javascript / CSS Часовете са според зоната GMT + 2 Часа
Страница 1 от 1


 
Идете на:  
Не Можете да пускате нови теми
Не Можете да отговаряте на темите
Не Можете да променяте съобщенията си
Не Можете да изтривате съобщенията си
Не Можете да гласувате в анкети