радиус на страните

obqvi_in

Registered
[css]/***** 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.68);
-moz-box-shadow: 9px 7px 14px 0px rgba(51, 55, 48, 0.68);
box-shadow: 9px 7px 14px 0px rgba(51, 55, 48, 0.68);
}
/***** 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;
}
[/css]
Как да вдлъбна навътре двете страни горе на триъгълника. Може би не е точната дума 'вдлъбна', но за това се сетих с радиус или нещо подобно или с два кръга, но не знам как. Благодаря на всички!
 
здравей,

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

[css].form:before {
transform: rotate(180deg);
top: 0px;
}

// и

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

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

[css]
.form:before {
z-index: 2;
}
[/css]

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

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

Ако това е резултата който искаш да постигнеш можеш да използваш и картинка прозрачна картинка с триъгълниче позиционирана с background-position на главние елемент.
 

Горе