Question

请参阅以下我使用的CSS规则创建一个带有＆＃34;箭头效果的矩形＆＃34;左右：

CSS：

.hexagon {
    position: relative;
    width: 60px; 
    height: 34.64px;
    background-color: #64C7CC;
    margin: 17.32px 0;
}

.hexagon:before,
.hexagon:after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
}

.hexagon:before {
    bottom: 100%;
    border-bottom: 17.32px solid #64C7CC;
}

.hexagon:after {
    top: 100%;
    width: 0;
    border-top: 17.32px solid #64C7CC;
}

HTML：

<div class="hexagon"></div>

当我需要一个width:60px和height:22px以及左/右三角形适合的矩形时，有人可以帮我解决该怎么做吗？

Answer 1

JSFiddle - DEMO

＆＃13;

.hexagon {
  position: relative;
  width: 60px;
  height: 22px;
  background-color: #64C7CC;
  margin: 50px;
}

.hexagon:before,
.hexagon:after {
  content: " ";
  position: absolute;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

.hexagon:before {
  left: 100%;
  border-left: 11px solid #64C7CC;
}

.hexagon:after {
  right: 100%;
  border-right: 11px solid #64C7CC;
}

＆＃13;

<div class="hexagon"></div>

＆＃13;

六角形CSS（矩形带＆＃34;箭头效果＆＃34;）

1 个答案: