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

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

введите здесь описание изображения

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

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

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


html css twitter-bootstrap css-shapes
person Sikander    schedule 02.11.2015    source источник
comment
Есть пара веб-сайтов, на которых вы можете создать их визуально, повозившись с несколькими ручками. Найдите что-то вроде стрелки границы css или треугольника границы css, и вы должны их найти.   -  person Sverri M. Olsen    schedule 02.11.2015
comment
Дубликат решил мою проблему :)   -  person Sikander    schedule 02.11.2015

Ответы (3)


arrow_upward
3
arrow_downward

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

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>

person kushal kant    schedule 02.11.2015
comment
Ответы не должны быть просто ссылками на внешний сайт, и они должны иметь возможность работать самостоятельно (на случай, если связанный сайт выйдет из строя). Пожалуйста, добавьте к своему ответу хотя бы сгенерированный код. - person Harry; 02.11.2015
comment
хорошо, Гарри, в следующий раз я позабочусь об этом :) - person kushal kant; 02.11.2015
comment
Это нормально, но если вы не обновите этот ответ, он может быть удален рецензентами (сообществом), и вы потеряете любую репутацию, полученную из-за этого. Так что на этот раз лучше позаботьтесь об этом сам :) - person Harry; 02.11.2015
comment
Вы подали 2 голоса за ответ, но ваш пост также был отмечен как сообщение низкого качества. Лучше обновить ответ соответствующим кодом, чтобы избежать удаления. - person m4n0; 02.11.2015

arrow_upward
1
arrow_downward

Отметьте эту скрипку. Надеюсь, вы сослались на что-то подобное.

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;
}
person Sameera Thilakasiri    schedule 02.11.2015
comment
Спасибо за скрипку, но на самом деле это не всплывающая подсказка, а сам div. - person Sikander; 02.11.2015

arrow_upward
1
arrow_downward 

.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/

person Mitul    schedule 02.11.2015
comment
Заметный ответ! Пожалуйста, добавьте свои комментарии, если «Этот ответ бесполезен». - person Kunj; 02.11.2015
comment
@KunJ: Я не был тем, кто голосовал против, но первоначальная версия этого ответа была версией только по ссылке, которая могла вызвать отрицательное голосование (и я не могу объяснить, почему другой ответ только по ссылке тоже не получил). - person Harry; 02.11.2015
comment
Да, может быть, поэтому я добавил код для более подробной информации, - person Mitul; 02.11.2015
comment
И если это причина, то почему @kushalkant проголосовали за :( - person Mitul; 02.11.2015
comment
@ Гарри, спасибо за ответ и вклад! Правильно сказано. Голосующий вниз должен изменить свой голос, если mitul улучшил свой ответ :) - person Kunj; 02.11.2015
comment
@all может быть stackoverflow отправить уведомление избирателю, если пользователь изменит ответ, чтобы он / она просмотрел новые ответы и изменил голос. прямо сейчас, если кто-то проголосует против и покинет страницу, он не сможет увидеть, изменил ли пользователь ответ. - person Mitul; 02.11.2015