html - 如何在CSS中为几何图形添加边框？

Question

如何为这个用 css 创建的几何图形添加边框？ 我尝试过这个，但它不起作用。边框看起来像一个正方形... https://jsfiddle.net/asngxe77/

HTML:

<div align="center" class="orpos">
     <div class="orstyle">
     <div class="or">
     </div>
     </div>
     </div>

CSS:

.orpos{

    position: relative;
    height: 100px;
    width: 100px;
    top: 50%;
    margin-top: -50px;
    left: 50%;
    margin-left: -50px;

}

.orstyle{
    border: solid 1px #505246;
}

.or {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: #272822;
    position: relative;
    top: -50px;
}
.or:after {
    content: '';
    position: absolute;
    left: -50px;
    top: 50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: #272822;
}

Answer 1

您仍然可以使用边框，然后使用变换和渐变:

.orpos {
  position: relative;
  height: 100px;
  width: 100px;
  margin: auto;
  overflow: hidden;
}
.orstyle {
  border: solid 4px #505246;
  /* set a background-color and draw the last border in bg */
  background: linear-gradient(135deg, #505246 38%, transparent 38%) gold;
  width: 60%;
  height: 60%;
  transform: rotate(45deg);
  margin-top: -20%;
}
.or {
  transform: rotate(-45deg);
  margin-top: 38.5%;
  /* to stay away from top border area */
}
/* demo purpose */

.orpos {
  display: inline-block;
  vertical-align: top;
}
.border1 {
  border-width: 1px;
}
.border10 {
  border-width: 10px;
}
.border5 {
  border-width: 5px;
}

<div align="center" class="orpos">
  <div class="orstyle border1">
    <div class="or">
      OR
      <!-- was text meant to be here ? -->
    </div>
  </div>
</div>
<div align="center" class="orpos">
  <div class="orstyle">
    <div class="or">
      OR
      <!-- was text meant to be here ? -->
    </div>
  </div>
</div>
<div align="center" class="orpos">
  <div class="orstyle border10">
    <div class="or">
      OR
      <!-- was text meant to be here ? -->
    </div>
  </div>
</div>
<div align="center" class="orpos">
  <div class="orstyle border5">
    <div class="or">
      OR
      <!-- was text meant to be here ? -->
    </div>
  </div>
</div>

来自 css-tricks 网站上钻石方 block 的代码演示:

#diamond {
   margin: 1em;
   width: 0;
   height: 0;
   border: 50px solid transparent;
   border-bottom-color: red;
   position: relative;
   top: -50px;
 }
 #diamond:after {
   content: '';
   position: absolute;
   left: -50px;
   top: 50px;
   width: 0;
   height: 0;
   border: 50px solid transparent;
   border-top-color: red;
 }
 #diamond:before {
   content: '';
   position: absolute;
   height: 80px;
   width: 80px;
   background: gray;
   transform: rotate(45deg);
   left: -40px;
   top: 10px;
   z-index: -1;
 }
 #diamond:hover:before {
   box-shadow: inset 0 0 0 3px green, 0 0 0 3px;
   /* more borders border ?*/
   border-radius: 4px;
   background:white
 }

<p>Hover the diamond and see some extra css effects to draw a three color rounded borders</p>
<div id="diamond"></div>