Question

如何使用三角形css作为之前的下拉箭头。

我创建了这个css

set_target_properties(theprebuiltlib PROPERTIES IMPORTED_LOCATION
        C:/svn/sys_libs/armeabi/libtheprebuiltlib.so)

我也创建了demo。 http://trianglecss.blogspot.com/2018/06/triangle-shape-with-css.html

Answer 1

:before和:after是CSS伪类。将它们视为在您定位的课程之前或之后呈现的新标签。因此，如果您有一个名为.dropdown的div，您可以在该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;;
}

您最终需要为此三角形添加其他样式以定位它，但这是开始。

Answer 2

我建议使用图标库，如fontawesome，glyphicons。 UI设计看起来更好。

＆＃13;

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

＆＃13;

    .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;
   }

＆＃13;

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

＆＃13;

使用三角形形状css用于之前的下拉箭头

2 个答案: