[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]
Как да вдлъбна навътре двете страни горе на триъгълника. Може би не е точната дума 'вдлъбна', но за това се сетих с радиус или нещо подобно или с два кръга, но не знам как. Благодаря на всички!
.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]
Как да вдлъбна навътре двете страни горе на триъгълника. Може би не е точната дума 'вдлъбна', но за това се сетих с радиус или нещо подобно или с два кръга, но не знам как. Благодаря на всички!