Css: создание загнаны границы с помощью CSS

Question

Я, чтобы создать что-то вы видите в прилагаемом изображении

прямо сейчас я использую это как фоновое изображение

background-image: url("corner.png"); 
background-size: cover; 

и затем добавляют текст но я знаю, что существует решение css для создания этой границы для этого, поэтому, если кто-то, пожалуйста, помогите мне с этим, я попытался найти, но я не нашел подходящего решения.

Answer 1

.arrow-down { 
 
    width: 200px; 
 
    height: 50px; 
 
    position: relative; 
 
    background: red; 
 
} 
 
.arrow-down:after { 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    border-top: 20px solid #f00; 
 
    position: absolute; 
 
    bottom: -19px; 
 
}

<div class='arrow-down'>fgdfgdfgfd</div>

Это поможет вам. он создаст стрелки, используя css.

https://css-tricks.com/snippets/css/css-triangle/

Answer 2

Проверить это fiddle Надеюсь, что вы смотрите что-то вроде этого.

a.tooltips { 
    position: relative; 
    display: inline; 
} 
a.tooltips span { 
    position: absolute; 
    width:140px; 
    color: #FFFFFF; 
    background: #000000; 
    height: 30px; 
    line-height: 30px; 
    text-align: center; 
    visibility: hidden; 
    border-radius: 6px; 
} 
a.tooltips span:after { 
    content: ''; 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -8px; 
    width: 0; height: 0; 
    border-top: 8px solid #000000; 
    border-right: 8px solid transparent; 
    border-left: 8px solid transparent; 
} 
a:hover.tooltips span { 
    visibility: visible; 
    opacity: 0.8; 
    bottom: 30px; 
    left: 50%; 
    margin-left: -76px; 
    z-index: 999; 
} 

Answer 3

Вы также можете создать его из приведенной ниже ссылки и использовать его.

http://apps.eky.hk/css-triangle-generator/

.arrow { 
 
    width: 250px; 
 
    height: 60px; 
 
    position: relative; 
 
    background: #333; 
 
} 
 
.arrow:after { 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-top: 15px solid #333; 
 
    position: absolute; 
 
    bottom: -15px; 
 
    left:25px; 
 
}

<div class="arrow"></div>