数据可视化网页数据边框设计

原创已于 2023-03-20 23:23:01 修改 · 388 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

于 2023-03-20 23:22:59 首次发布

文章介绍了两种创建独特UI元素的方法。第一种利用CSS的`border-image`属性进行图片切割，创建带有复杂边框的公共面板。第二种方法是通过添加伪元素创建直角，适用于面板设计，通过定位和边框样式实现角落的直角效果。

第一种，图片切割

公共面板设计

<div class="panel">
<div class="inner"></div>
</div>

panel{
    position: relative;
    border: 15px solid transparent;
    border-width: 1rem;/*转换为rem*/上  右 下  左
    border-image-source: url();/*图片路径*/
    border-image-slice:51 38 20 132;
    margin-bottom: .25rem;/*底边距*/
}
.inner{
    position: absolute;
    top:-0.6375rem;  /*51px*/
    left: -1.65em;  /*132px*/
    right: -0.412rem; /*38px*/
    bottom: 0.25rem;  /*20px*/
    padding: .3rem .45rem;   /*24px 36px*/
    background-color: red;
}

调用公共面板

<div class="panel overview">
<div class="inner"></div>
</div>

.overview{
    height:1.375rem;
}

第二种，新加盒子做直角

<div class="panel">
    <div class="panel-footer"></div>
</div>

.panel {
  position: relative;
  height: 3.875rem;   310px
  padding: 0 0.1875rem 0.5rem;  上0  左右15px  下40px
  border: 1px solid rgba(25, 186, 139, 0.17);
  margin-bottom: 0.1875rem;  底边距10px
  background: url(../images/line\(1\).png) rgba(255, 255, 255, 0.03);
}
.panel::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.panel::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
  content: "";
}
.panel .panel-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.panel .panel-footer::before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}
.panel .panel-footer::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
  content: "";
}