Достижение стрелочных фигур в баннере в CSS

Я хочу достичь следующих форм, используя чистый CSS, без изображений.

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

Я пришел к следующему пункту.

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

Вот структура HTML :

  • Application Received
  • Language Exam
  • Oral Exam
  • Grant

И вот CSS :

 #applicationStatus { position: relative; width: auto; height: 140px; left: 40px; } ul.applicationStatus { list-style: none; } li.applicationStatus, li.applicationStatusGood, li.applicationStatusNoGood { height: 140px; background-color: #767676; display: inline-block; /* Dirty IE Hack */ zoom: 1; *display: inline; margin-right: 30px; margin-left: 30px; padding: 10px; color: white; font-size: 18px; text-align: center; line-height: 150px; /* vertical-align: middle; */ } li.applicationStatus:after, li.applicationStatusGood:after, li.applicationStatusNoGood:after { content: ""; position: absolute; width: 0; height: 0; border-top: 80px solid transparent; border-left: 30px solid #767676; border-bottom: 80px solid transparent; margin: -10px 90px 0 10px; } li.applicationStatus:before, li.applicationStatusGood:before, li.applicationStatusNoGood:before { content: ""; position: absolute; width: 0; height: 0; left: 0px; border-top: 80px solid transparent; border-left: 30px solid white; border-bottom: 80px solid transparent; margin: -10px 0px 0 0px; } li.applicationStatus:first-child, li.applicationStatusGood:first-child, li.applicationStatusNoGood:first-child { margin-left: 0px; text-indent: 30px; } li.applicationStatus:last-child, li.applicationStatusGood:last-child, li.applicationStatusNoGood:last-child { border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; } li.applicationStatusGood { background-color: #77a942; } li.applicationStatusGood:after { border-left: 30px solid #77a942; } li.applicationStatusNoGood { background-color: #c42c00; } li.applicationStatusNoGood:after { border-left: 30px solid #c42c00; } 

Почему нет :before селектор применяется ко всем формам или вообще всем, как я могу достичь того, что хочу?

Solutions Collecting From Web of "Достижение стрелочных фигур в баннере в CSS"

Модификация вашего кода

Основная проблема, с которой вы столкнулись, заключалась в отсутствии position: relative по вашим li элементам. Но были и другие вещи, которые нуждались в настройке.

Вот пример скрипки.

Я добавил class, который вам не удалось ссылаться в HTML выше, на элемент ul , поэтому вот HTML:

 
  • Application Received
  • Language Exam
  • Oral Exam
  • Grant

Затем я немного изменил ваш CSS, чтобы сконденсировать его (может быть более сжатым, если поддерживается только CSS3):

 #applicationStatus { position: relative; width: auto; height: 140px; left: 40px; } .applicationStatus li { /* Added this and moved much code to here */ position: relative; /* this was a key property missing from your code */ text-indent: 30px; height: 140px; background-color: #767676; display: inline-block; /* Dirty IE Hack */ zoom: 1; *display: inline; /* margin-right: 30px; Eliminated this */ margin-left: 30px; padding: 10px 10px 10px 30px; /* tweaked this */ color: white; font-size: 18px; text-align: center; line-height: 150px; } ul.applicationStatus { /* this was irrelevant with the HTML you gave, but I added the class to the ul */ list-style: none; } /* tweaked various things below here */ li.applicationStatus:first-child:after, li.applicationStatusGood:after, li.applicationStatusNoGood:after { content: ""; position: absolute; width: 0; height: 0; border-top: 80px solid transparent; border-left: 30px solid #767676; border-bottom: 80px solid transparent; margin: -10px 90px 0 10px; } li.applicationStatus:last-child:before, li.applicationStatusGood:before, li.applicationStatusNoGood:before { content: ""; position: absolute; width: 0; height: 0; left: 0; border-top: 80px solid transparent; border-left: 30px solid white; border-bottom: 80px solid transparent; margin: -10px 0px 0 0px; } li.applicationStatus:first-child { padding-left: 10px; margin-left: 0; } li.applicationStatus:last-child { padding-right: 30px; } li.applicationStatusGood { background-color: #77a942; } li.applicationStatusGood:after { border-left: 30px solid #77a942; } li.applicationStatusNoGood { background-color: #c42c00; } li.applicationStatusNoGood:after { border-left: 30px solid #c42c00; } 

U может попробовать этот сайт.

http://cssarrowplease.com/

 .arrow_box { position: relative; background: #88b7d5; border: 8px solid #c2e1f5; } .arrow_box:after, .arrow_box:before { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-left-color: #88b7d5; border-width: 30px; top: 50%; margin-top: -30px; } .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-left-color: #c2e1f5; border-width: 41px; top: 50%; margin-top: -41px; }