css 方向 箭头

Posted 2023-04-01

求，纯css，效果，包括矩形和箭头。请忽略中间的红色涂鸦!
最好是扁平的风格
方向箭头的颜色，如果可以的话，帮我改改吧.
我是做后台的，前端大概我可以实现，但是细节部分......所以来找大家帮忙

<style>
        .arboxposition: relative;
        .arr
            width: 0;
            height: 0;
            overflow: hidden;
            border-width: 10px;
            border-style:dashed dashed dashed solid;
            border-color:transparent transparent transparent #b2c1db;
            position: absolute;
            left: 15px;
        
        .block 
          background-color: #b2c1db;
          height: 12px;
          left: 3px;
          overflow: hidden;
          position: absolute;
          top: 4px;
          width: 12px;
        
    </style>
    
    <div class="arbox">
        <div class="arr"></div>
        <div class="block"></div>
    </div>

追问

还有矩形呢......而且我还不会组合（div的文字垂直居中,如何让div在一行等等问题......）
没啥能给的，帮我实现后，还可以再加分.....

追答        .arbox 
          float: left;
          height: 23px;
          margin-right: 10px;
          margin-top: 11px;
          position: relative;
          width: 28px;
        
        .box
            float: left;
            width: 100px;
            height: 43px;
            line-height: 43px;
            margin-right: 10px;
            background-color: #4f81bd;
            text-align: center;
            color: #fff;
        

    <div class="box">导航</div>
    <div class="arbox">
        <div class="arr"></div>
        <div class="block"></div>
    </div>
    <div class="box">导航1</div>

字数有限制发不了这么多，把上面的代码整合起来就行了

参考技术A 没看到过css能做出你图上的箭头，很多都是一个小图片

AntDVue ant-collapse 用干净的 CSS 改变箭头的方向

【中文标题】AntDVue ant-collapse 用干净的 CSS 改变箭头的方向

【英文标题】：AntDVue ant-collapse change directions of arrows with clean CSS

【发布时间】：2021-12-14 16:18:16

【问题描述】：

如何更改 ant-collapse vue 箭头方向？

所以我遇到了一个问题，如果没有!important（我不喜欢..），我无法更改箭头方向，所以我们在我的工作中找到了解决这个问题的方法，感谢 Epuñan。

https://css-tricks.com/override-inline-styles-with-css/

所以最终我第一次使用 ant-collapse 组件时，我将箭头分别设置为向上和向下的道具，但现在我想做得很好，我做到了！这是解决方案

【参考方案1】：

嗯，有两种可能的解决方案，一种很漂亮，另一种不太好看。为了时间，让我们先选择最漂亮的。

`::v-deep .ant-collapse-item > .ant-collapse-header .anticon 
  transform: rotate(90deg);
  transition: transform 0.5s ease-in-out;
`

这里我们设置了箭头的默认行为，所以它应该指向下方.. 但问题是当折叠处于活动状态时，箭头的行为是由内联样式设置的，所以很难到达那里..这是解决方案：

 ::v-deep .ant-collapse-item-active > .ant-collapse-header .anticon 
  transform: rotate(180deg);
  transition: transform 0.5s ease-in-out;

我们在折叠组件中搜索活动类，只搜索我们想要的任何转换属性。

丑陋的解决方案：

&[aria-expanded='true'] 
  .ant-collapse-arrow > svg 
  transform: rotate(180deg) !important;
  transition: all 0.5s ease-in-out;
      
   

用重要的覆盖..

【参考方案2】：

为了记录，这个解决方案不仅适用于 Vue 或 React、Less 或 Sass，而且适用于 Ant Design System：

.ant-collapse-item > .ant-collapse-header .anticon 
  transform: rotate(90deg);


.ant-collapse-item-active > .ant-collapse-header .anticon 
  transform: rotate(180deg);