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

Post Reply
obqvi_in
Нов
Нов
Posts: 148
Joined: Wed Apr 18, 2012 5:24 pm

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

Post by obqvi_in » Tue Mar 06, 2018 4:38 pm

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

User avatar
deam0n
Tourist Defender
Tourist Defender
Posts: 3010
Joined: Sat Oct 01, 2005 4:33 pm
Answers: 204
Location: Шопландия
Contact:

Post by deam0n » Tue Mar 06, 2018 9:17 pm

здравей,

хаха ако правилно съм те разбрал какво искаш да направиш можеш да завъртиш елементите и да им занулиш 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 на главние елемент.

obqvi_in
Нов
Нов
Posts: 148
Joined: Wed Apr 18, 2012 5:24 pm

Post by obqvi_in » Wed Mar 07, 2018 5:58 pm

Знаех си, че не съм обяснил както трябва ще ти пратя линк със снимка на нещо подобноhttps://www.123rf.com/photo_5441751_two ... d-ink.html
Двете страни да са извити може да не точно както е на картинката, може и двете да са навътре.

Post Reply