Создание эффекта капли, как эффект границы в css

Question

Я создал этот дизайн границ в Photoshop и задавался вопросом, может ли кто-нибудь дать мне некоторое руководство по воссозданию, используя css.

Answer 1

Создание эффекта, как это, безусловно, возможно, с помощью CSS3, но вам потребуется больше, чем просто границы для этого.

В приведенном ниже примере я использовал псевдоэлемент с фоном radial-gradient, чтобы имитировать эффект границы, о котором идет речь. В зависимости от того, какая сторона должна иметь границу, вы можете настроить положение псевдоэлемента для достижения эффекта.

Образец, указанный в ответе, влияет на верхнюю границу. Если вы хотите его для нижней границы, вы можете обратиться к образцу this. То же самое можно добиться и для левой/правой границы, но потребуется немного больше настроек.

Вы также можете настроить свойство background-size, чтобы достичь меньших/больших кругов на границе. Вы также можете создать шаблон эллипса вместо круга на границе, используя ключевое слово ellipse вместо circle в значении свойства radial-gradient.

Очки отметить:

1. Внимание: Я добавляю этот ответ только чтобы показать, что этот эффект можно создать, используя только CSS3, но не будет рекомендовать его для использования только в качестве еще из-за относительно lesser browser support for radial-gradients. Вы можете использовать это, если все целевые браузеры поддерживают его.
2. Если вам нужен этот эффект границы со всех сторон, то просто псевдоэлементов будет недостаточно. Вам понадобятся дополнительные элементы для каждой стороны, а затем поместите их по мере необходимости.
3. Фон radial-gradient также может быть непосредственно добавлен к основному div, если граница требуется только сверху. Но позиционирование/достижение этого эффекта для нижней границы было бы невозможно с этим и, следовательно, с использованием псевдоэлемента.
4. border-image Свойство может использоваться для достижения такого же эффекта с использованием только границ, но имеет меньшую поддержку browswer, чем radial-gradients (даже IE 10 не поддерживает его), и, следовательно, не рекомендуется/используется.
5. Данный код был протестирован в Firefox, Chrome, Opera и Safari, а также должен работать в IE 10+, так как radial-gradients не поддерживается в IE 9 и меньше.

.bordered{ 
 
    position: relative; 
 
    height: 75px; 
 
    width: 100%; 
 
    border-top: 40px solid black; 
 
    background: #EEE; 
 
    padding-top: 10px; 
 
} 
 
.bordered:before{ 
 
    position: absolute; 
 
    content: ''; 
 
    top: 0px; 
 
    height: 8px; 
 
    width: 100%; 
 
    background-size: 12px 12px; 
 
    background-position: -5px -3px; 
 
    background-image: -webkit-radial-gradient(50% 0%, circle, black 50%, transparent 55%); 
 
    background-image: -moz-radial-gradient(50% 0%, circle, black 50%, transparent 55%); 
 
    background-image: radial-gradient(circle at 50% 0%, black 50%, transparent 55%); 
 
}

<div class="bordered">Lorem Ipsum Dolor Sit Amet</div>

---

Связанные Образцы:

1. Способ пр oducing a подобный узор, но с треугольными разрезами внизу, а не круг, можно найти здесь - Making jagged triangle border in CSS.

2. Такой же способ может быть , используемый для изготовления почтовой марки, такой как граница сверху и снизу. Образец для этого доступен here. Существует также аналогичный вопрос и ответ here, который я не встретил, прежде чем публиковать образец в этом ответе.

3. Этот же метод может быть использован для создания границы, которая также является обратной границей капли (как на изображении ниже). Образец для этого доступен here.

Answer 2

В дополнение к @ ответ Гарри - (который, вероятно, лучший способ приблизиться к этому) ...

Мы также могли бы добиться этого эффекта, используя свойство WebKit text-stroke установкой толстый удар по символу, например, «0».

Мы можем точно отрегулировать этот эффект, изменив толщину штриха и размер шрифта символа.

div{ 
 
    position: relative; 
 
    height: 75px; 
 
    width: 100%; 
 
    border-bottom: 20px solid black; 
 
    background: #EEE; 
 
    padding-top: 10px; 
 
} 
 
div:after{ 
 
    position: absolute; 
 
    content: '00000000000000000000000000000000000000000000000000000000000'; 
 
    font-size: 30px; 
 
    -webkit-text-stroke: 10px black; 
 
    text-stroke: 10px black; 
 
    bottom:-35px; 
 
    left:0; 
 
    width: 100%; 
 
    overflow:hidden; 
 
}

<div>Lorem Ipsum Dolor Sit Amet</div>