我怎样才能制作八角形盒子？

时间：2015-04-26 17:49:37

标签： html css css3 css-shapes

我想使用CSS创建下面给出的框。

enter image description here

我搜索了很多并阅读了非常好的文章，如https://css-tricks.com/examples/ShapesOfCSS/，但我陷入了一个问题 - 紫边切边。我试过八角形，但这种情况不适用。

我几乎实现了这个目标。这是我的片段：

.box-outer {
  width: 300px;
  height: 120px;
  padding: 15px 30px;
  background: rgba(237, 236, 236, 0.72);
  border: 3px solid rgb(89, 67, 128);
  position: relative;
  border-right: 20px solid rgb(89, 67, 128);
}
.box-outer:before {
  content: "";
  position: absolute;
  top: -3px;
  left: -4px;
  border-bottom: 29px solid rgb(255, 252, 252);
  border-right: 29px solid #594380;
  border-top: 28px solid #FFF;
  height: 66%;
  width: 0;
}
.box-outer:after {
  content: "";
  position: absolute;
  top: -3px;
  right: -13%;
  border-top: 29px solid white;
  border-left: 29px solid #594380;
  border-bottom: 28px solid #FFF;
  width: 0;
  height: 66%;
}
.box-outer .right-text {
  position: absolute;
  right: -22%;
  color: white;
  font-size: 20px;
  top: 40%;
  z-index: 10;
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}
<div class="box-outer">
  <span class="right-text">
           LEGISLATIVE
        </span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<!--box outer-->

当前工作截图

enter image description here

3 个答案:

答案 0 :(得分：3)

请最终查看此解决方案

我添加了box-inner div以使其成为可能。

查看小提琴

`http://jsfiddle.net/maverickabhi/qfthejb2/`


.box-outer {
  width: 300px;
  height: 120px;
  padding: 15px 30px;
  background: rgba(237, 236, 236, 0.72);
  border: 3px solid rgb(89, 67, 128);
  position: relative;
  border-right: 20px solid rgb(89, 67, 128);
}
.box-outer:before {
  content: "";
  position: absolute;
  top: -3px;
  left: -4px;
  border-bottom: 29px solid rgb(255, 252, 252);
  border-right: 29px solid #594380;
  border-top: 28px solid #FFF;
  height: 66%;
  width: 0;
}
.box-outer:after {
  content: "";
  position: absolute;
  top: -3px;
  right: -13%;
  border-top: 29px solid white;
  border-left: 29px solid #594380;
  border-bottom: 28px solid #FFF;
  width: 0;
  height: 66%;
}
.box-outer .right-text {
  position: absolute;
  right: -22%;
  color: white;
  font-size: 20px;
  top: 40%;
  z-index: 10;
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
}
.box-inner {
  content: "";
  position: absolute;
  top: -2px;
  left: -1px;
  border-bottom: 30px solid transparent;
  border-right: 29px solid #F1F0F0;
  border-top: 29px solid transparent;
  height: 63%;
  width: 0;
}
<div class="box-outer">
  <span class="right-text">
           LEGISLATIVE
        </span>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  <div class="box-inner"></div>
</div>
<!--box outer-->

答案 1 :(得分：3)

这是一种使用CSS3变换来实现八边形形状并且内部也具有透明度的替代方法。使用此方法时，背景不必是纯色。它可以是图像或渐变。

形状基本上由以下内容组成：

  • 右侧有顶部边框，底部边框和插入框阴影的容器。 （下面的绿色区域截图 * ）
  • 左侧的伪元素，其高度与使用变换以透视方式旋转的容器相同。 （下面的蓝色区域截图 * ）
  • 右侧的另一个伪元素，它在左侧的元素的反方向上旋转。 （下面的红色区域截图 * ）
  • 容器上的插入框阴影与右侧的伪元素的背景相同（使其看起来好像只有一半是偏斜的。）
  • 父容器周围的额外阴影和右侧的伪元素为整个形状提供阴影。

enter image description here

* - 不同的颜色仅用于说明形状的形成方式。

＆＃13;
＆＃13; 
.shape {
  position: relative;
  height: 150px;
  width: 300px;
  margin: 40px;
  border-color: #594380;
  border-style: solid;
  border-width: 2px 0px;
  background: rgba(252, 252, 252, 0.5);
  box-shadow: inset -20px 0px 0px #594380, 2px 3px 3px rgba(0,0,0,0.3);
}
.shape:before,
.shape:after {
  position: absolute;
  content: '';
  top: -2px;
  width: 30px;
  height: 100%;
  border: 2px solid #594380;
}
.shape:before {
  left: -32px;
  border-right: none;
  background: rgba(252, 252, 252, 0.5);
  -webkit-transform-origin: right 50%;
  -moz-transform-origin: right 50%;
  transform-origin: right 50%;
  -webkit-transform: perspective(15px) rotateY(-10deg);
  -moz-transform: perspective(15px) rotateY(-10deg);
  transform: perspective(15px) rotateY(-10deg);
  box-shadow: inset 2px 0px 0px #594380, inset 0px -1px 0px #594380, inset 0px 1px 0px #594380;
}
.shape:after {
  right: -34px;
  background: #594380;
  -webkit-transform-origin: left 50%;
  -moz-transform-origin: left 50%;
  transform-origin: left 50%;
  -webkit-transform: perspective(15px) rotateY(10deg);
  -moz-transform: perspective(15px) rotateY(10deg);
  transform: perspective(15px) rotateY(10deg);
  box-shadow: inset -2px 0px 0px #594380, inset 0px -1px 0px #594380, inset 0px 1px 0px #594380, 6px 2px 5px 3px rgba(0,0,0,0.3);
}
span {
  position: absolute;
  right: 0px;
  top: 12px;
  display: block;
  height: 20px;
  width: 100px;
  text-align: center;
  text-transform: uppercase;
  color: white;
  -webkit-transform-origin: right;
  -moz-transform-origin: right;
  transform-origin: right;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  transform: rotate(-90deg);
  z-index: 2;
}
body {
  background: url(http://lorempixel.com/500/500);
}
＆＃13; 
<div class="shape">
  Lorem ipsum dolor sit amet...
  <span>legislative</span>
</div>
＆＃13;
＆＃13;
＆＃13;

  

注意：当我们仔细观察时，左侧的边框会有轻微的错位，但这是一个几乎不会引起注意的故障。发表这个答案的想法是为未来的读者提供一个想法。

获取八角形形状的其他方法：

  • 由CodePen提供的jbutler483有一个使用不同方法获得的样本。与上面的片段一样，这也有一个非常小的故障，其中由于使用了倾斜变换，左侧的倾斜边界有点薄。
  • 如果需要透明的正八边形，可以采用下面片段中使用的方法。在处理半透明形状时，这并非有用（如第二个样本所示）。请注意，在形状中定位文本需要单独处理。

＆＃13;
＆＃13; 
.shape,
.octagon,
.shape:before,
.shape:after {
  border-top: 2px solid steelblue;
  border-bottom: 2px solid steelblue;
}

.shape {
  height: -webkit-calc(141.44px + 100px); /* width * sin(135) * 2 + width */
  height: -moz-calc(141.44px + 100px);
  height: calc(141.44px + 100px);
  width: 100px;
  position: relative;
  margin: 40px 80px;
}

.shape:after,
.shape:before,
.octagon {
  position: absolute;
  height: 100%;
  width: -webkit-calc(100% + 2px);
  width: -moz-calc(100% + 2px);
  width: calc(100% + 2px);
}

.shape:before,
.shape:after {
  content: '';
  top: -2px;
  left: -2px;
}

.octagon {
  top: -2px;
  left: -2px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
}

.shape:before {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  transform: rotate(135deg);
}

.shape:after {
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.semi-transparent, .semi-transparent .octagon, .semi-transparent.shape:after, .semi-transparent.shape:before{
  background: rgba(1, 1, 1, 0.5);  
}

body {
  background: -webkit-linear-gradient(90deg, crimson, indianred, purple);
  background: -moz-linear-gradient(90deg, crimson, indianred, purple);
  background: linear-gradient(90deg, crimson, indianred, purple)
}
body > div{
  display: inline-block;
}
＆＃13; 
<div class="shape">
    <div class="octagon"></div>
</div>

<div class="shape  semi-transparent">
    <div class="octagon"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：2)

这是一个svg解决方案。

不幸的是，它使用了一些硬编码的数字来表示大小。

我发现svg中的垂直文本更容易，因为你可以简单地将其旋转90度并且它可以正常工作。

主要元素是两个多边形。考虑使用渐变元素背景，但选择这个因为它更容易理解形状发生了什么。

文本元素使用div完成，并使用固定大小设置为绝对值。 我发现这可以做得更好但却无法想到更好的解决方案。 

.box div{
  position: absolute;
  margin-left: 70px;
  margin-right: 100px;
  margin-top: 5px;
  width: calc(600px - 70px - 100px);
}
.ticket .content {
  stroke: rgb(100, 0, 100);
  stroke-width: 2px;
  fill: #fff;
}
.ticket .end {
  stroke: rgb(100, 0, 100);
  stroke-width: 2px;
  fill: rgb(100, 0, 100);
}
.ticket #vertical {
  fill: #fff;
}
<div class="box">
  <div>lorem ipsum dolar si amet lorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si ametlorem ipsum dolar si amet</div>
  <svg class="ticket" height="300px" width="600px" viewbox="-1 -1 202 102">
    <polygon class="content" points=" 0 20, 20 0, 170 0, 170 100, 20 100, 0 80" />
    <polygon class="end" points="170 0, 180 0, 200 20, 200 80, 180 100, 170, 100" />
    <text id="vertical" transform="translate(185 93) rotate(-90)">Golden ticket</text>
  </svg>
</div>

相关问题
最新问题