Использование треугольной формы css для выпадающей стрелки с последующим до

Question

Как я могу использовать треугольную форму css для стрелки раскрывающегося списка до и после.

Я создал этот css

<span class="arrow-top"></span>
.arrow-top {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 35px solid #943c3c;;
}

Я также создал демо.http://trianglecss.blogspot.com/2018/06/triangle-shape-with-css.html

Answer 1

Я бы предложил использовать библиотеку иконок, такую ​​как fontawesome, glyphicons.Это выглядит лучше для дизайна пользовательского интерфейса.

$('.dropdown').on('click', function(){
        $(this).toggleClass('show');
})

    .dropdown{
      position:relative;
    }
    .dropdown:after{
      position:absolute;
      content:'';
      left:80px;
      top:8px;
    	width: 0;
    	height: 0;
    	border-left: 4px solid transparent;
    	border-right: 4px solid transparent;
    	border-top: 8px solid red;
    }
    
    .submenu{display:none;}

   .show .submenu{
      display:block;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="dropdown">Dropdown
      <ul class="submenu">
             <li>submenu 1</li>
             <li>submenu 2</li>
      </ul>
</li>
</ul>

Answer 2

:before и :after - псевдоклассы CSS.Думайте о них как о новых тегах, отображаемых до или после класса, на который вы нацелены.Так что если у вас есть div с именем .dropdown, вы можете сделать стрелку до или после этого div без какой-либо дополнительной разметки.

HTML:

<div class="dropdown">
  My Dropdown
</div>

CSS:

.dropdown::after {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 35px solid #943c3c;;
}

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