鍍金池/ 問答/HTML5  HTML/ 怎么畫一個有邊框的等邊六邊形

怎么畫一個有邊框的等邊六邊形

問題描述

看了一下大網(wǎng)上的demo都是用div 嵌套然后transform ， 但是這種不支持出現(xiàn)邊框， 只有邊框的應(yīng)該怎么畫呢？

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）

你期待的結(jié)果是什么？實際看到的錯誤信息又是什么？

回答
編輯回答
貓館

用 svg 畫。

2017年2月2日 02:54
編輯回答
慢半拍
<!-- html  -->
<div class='div'></div>
<style>

.div {
    position: relative;
    width: 50px;
    height: 86.6px;
    margin: 50px auto;
    background-color: red;
}
.div:before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    right:50px;
    border-width: 43.3px 25px;
    border-style: solid;
    border-color: transparent red transparent transparent;
}
.div:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    left:50px;
    border-width: 43.3px 25px;
    border-style: solid;
    border-color: transparent transparent transparent red;
    top:0;
}
</style>

這種百度一下一大片的。。

你要的邊框的

<div style='position:relative;width:100px;margin:0 auto;'>
  <div class='one'></div>
  <div class='two'></div>
  <div class='three'></div>
</div>
<style>
  .one {
    width: 50px;
    height: 86.6px;
    margin: 0 auto;
    border-top: 1px solid red;
    border-bottom: 1px solid red;

  }

  .two {
    position: absolute;
    width: 50px;
    height: 86.6px;
    left: 25px;
    top: 0;
    transform: translate(-50%, -50%);
    transform: rotate(60deg);
    border-top: 1px solid red;
    border-bottom: 1px solid red;
  }

  .three {
    position: absolute;
    width: 50px;
    height: 86.6px;
    left: 25px;
    top: 0;
    transform: translate(-50%, -50%);
    transform: rotate(300deg);
    border-top: 1px solid red;
    border-bottom: 1px solid red;

  }

</style>

看的這篇博客

2018年2月14日 16:34