主页 / 问题 / 1094474
Accepted
Marro
Asked:2020-03-14 10:01:33 +0000 UTC2020-03-14 10:01:33 +0000 UTC

如何在css中制作这样的边框？[复制]

  • 772

如何在css中制作这样的边框？

在此处输入图像描述

html

3 个回答

  1. 不是相同的渲染，但没有不必要的元素。我认为可以通过调整角度（1.8 度）和渐变中颜色的位置来改善边框。

    .date {
  display: inline-block;
  font-weight:300;
  font-family: Open Sans, sans-serif;
  line-height:1;
  padding:6px;
  
  border-width: 2px;
  border-style: solid;
  border-image: 
    linear-gradient(
      1.8deg, 
      #F6D894 2px,
      #fff 2px,
      #fff 18px,
      #F6D894 19px, 
      #F6D894 90%,
      #fff 91%,
      #fff 97%,
      #F6D894 97%
    ) 1;
}

.date b {
  font-size:50px;
  display: block;
  font-weight:300;
}

.date::before {
  
}
    <p class="date">
  <b>27</b> января
</p>

    • 3
  2. Best Answer

    框架是定制的。字体由你决定。

    div {display: inline-block; position: relative; padding: 10px 10px 10px 10px; font-size: 15px; font-family: monospace; line-height: 2; text-align: center; color: rgba(0,0,0,0.8);
     background:
       linear-gradient(0deg, goldenrod 100%, transparent 100%) 0% 100%/90% 1px no-repeat,
       linear-gradient(0deg, goldenrod 100%, transparent 100%) 100% 0%/90% 1px no-repeat,
       linear-gradient(90deg, goldenrod 100%, transparent 100%) 0% 0%/1px 80% no-repeat,
       linear-gradient(90deg, goldenrod 100%, transparent 100%) 100% 30%/1px 80% no-repeat;}
span {display: block; transform: scale(2, 3); font-size: 20px;}
    <div><span>27</span>января</div>

    • 3 

  3. .block {
  width: 50px;
  height: 50px;
  position: relative;
}

.top,
.bot {
  width: 40px;
  height: 1px;
  background-color: red;
  position: absolute;
}

.left,
.right {
  width: 1px;
  height: 40px;
  background-color: red;
  position: absolute;
}

.left {
  bottom: 0%;
  right: 100%;
}

.right {
  top: 0;
  left: 100%;
}

.top {
  bottom: 100%;
  left: 0;
}

.bot {
  top: 100%;
  right: 0;
}
    <div class="block">
  <div class="left"></div>
  <div class="right"></div>
  <div class="top"></div>
  <div class="bot"></div>
</div>

    • 1

相关问题