与一个元素的半六角形形状 [英] Half hexagon shape with one element

问题描述

我尝试复制以下形状但未成功：

我想我需要一些：之前和：之后伪元素以及以下css：

  #pentagon {
 position：relative; 
 width：78px; 
 height：50px; 
 background：＃3a93d0; 
} 
  

解决方案

：

您可以使用以下CSS。使用：在伪元素后面的矩形底部放置一个三角形形状可以获得形状。三角形部分使用 border 方法实现。

  .pentagon {height：50px; width：78px;背景：＃3a93d0; position：relative;}。pentagon：after {border：39px solid＃3a93d0; border-top-width：15px; border-color：＃3a93d0 transparent透明; position：absolute; top：50px; content：'';}  

 < div class = pentagon>< / div>  

---

使用CSS转换：

此方法使用 rotate ， skewX ，因此需要一个完全符合CSS3的浏览器才能正常工作。这种方法的优点是它允许在形状周围添加边框，而不是使用 border 方法。缺点是它需要额外的角度计算。

这是 CodePen演示由 web-tiki 。

  .pentagon {position：relative; height：50px; width：78px;背景：＃3a93d0;}。五边形：before {position：absolute; content：''; top：12px; left：0; width：46px; height：38px;背景：＃3a93d0;转化原点：0 100％; transform：rotate（29deg）skewX（-30deg）;}。pentagon.bordered {background：white; border：1px solid＃3a93d0;}。pentagon.bordered：before {width：44px; height：37px;背景：白色; border：1px solid＃3a93d0; border-color：transparent＃3a93d0＃3a93d0 transparent; transform：rotate（29deg）skewX（-30deg）;} / *仅用于演示* /。pentagon {display：inline-block;}   < script src =https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js >< / script>< div class =pentagon>< / div>< div class =pentagon bordered>< / div>  
 

p>

这种方法仅使用 skew（）（沿X和Y轴），不需要任何复杂的角度计算。

 。五边形{位置：相对; height：50px; width：78px; border：1px solid＃3a93d0; border-bottom：none; background：aliceblue;}。pentagon：before {position：absolute; content：''; top：10px; / * parent height  -  child height -1px * / left：-1px; width：39px; height：39px; / * parent / 2的宽度/ border-right：1px solid＃3a93d0; border-bottom：1px solid＃3a93d0;背景：aliceblue;转化原点：0 100％; transform：matrix（1，0.414213562373095，-1,0.41421356237309515,0,0）;}  

 < div class =pentagon>< / div>  

$ b

上述代码片段使用 matrix 转换，因为根据 MDN ，将删除 skew（x，y），不应再使用。 矩阵解析网站可用于获取等效矩阵函数。 rotate（45deg）skew（-22.5deg，-22.5deg）的矩阵函数为

  matrix（1，0.414213562373095，-1，0.41421356237309515，0，0）。 
  

---

使用剪辑路径：

这是使用 clip-path 创建五边形形状的另一种方法。根据所需的浏览器支持，可以使用纯CSS clip-path 或带有内联SVG的一个。 CSS clip-path 目前仅受Webkit浏览器支持。

IE（所有版本）不支持CSS或SVG剪辑路径。

  .pentagon {position：relative; width：75px; height：calc（75px / 1.414）;背景：＃3a93d0;}。pentagon.css {-webkit-clip-path：polygon（0％0％，0％66％，50％100％，100％66％，100％0％）; clip-path：polygon（0％0％，0％66％，50％100％，100％66％，100％0％）;}。pentagon.svg {-webkit-clip-path：url（#clipper） ; clip-path：url（#clipper）;}。pentagon.bordered：after {position：absolute; content：''; height：calc（100％ -  2px）; width：calc（100％ -  2px）; left：1px; top：1px; background：white;}。pentagon.css.bordered：after {-webkit-clip-path：polygon（0％0％，0％66％，50％100％，100％66％，100％0％）; clip-path：polygon（0％0％，0％66％，50％100％，100％66％，100％0％）;} pentagon.svg.bordered：after {-webkit-clip-path：url （#clipper）; clip-path：url（#clipper）;} / *仅用于演示* /。pentagon {margin：10px;}  

 < svg width =0height =0> < defs> < clipPath id =clipperclipPathUnits =objectBoundingBox> < path d =M0,0 0,0.66 0.5,1 1,0.66 1,0z/> < / clipPath> < / defs>< / svg>< h3> CSS剪辑路径< / h3>< div class =pentagon css>< / div>< div class =pentagon bordered css> ; / div>< h3> SVG剪辑路径< / h3>< div class =pentagon svg>< / div>< div class =pentagon bordered svg>< / div> code> 

I'm trying to replicate the following shape with no success:

I'm guessing I'll need some :before and :after pseudo elements along with the following css:

#pentagon {
    position: relative;
    width: 78px;
    height:50px;
    background:#3a93d0;
} 

解决方案

Using Border Method:

You can do it using the below CSS. The shape is obtained by placing a triangle shape at the bottom of the rectangle using :after pseudo element. The triangular part is achieved using border method.

.pentagon {
  height: 50px;
  width: 78px;
  background: #3a93d0;
  position: relative;
}
.pentagon:after {
  border: 39px solid #3a93d0;
  border-top-width: 15px;
  border-color: #3a93d0 transparent transparent transparent;
  position: absolute;
  top: 50px;
  content: '';
}

<div class="pentagon"></div>

---

Using CSS Transforms:

This approach uses rotate, skewX and hence would need a fully CSS3 compliant browser to work properly. The advantage of this approach is that it allows borders to be added around the shape unlike when using border method. The drawback is that it needs additional calculations for the angles.

It is a modified version of the short triangle method mentioned in this CodePen demo by web-tiki.

.pentagon {
  position: relative;
  height: 50px;
  width: 78px;
  background: #3a93d0;
}
.pentagon:before {
  position: absolute;
  content: '';
  top: 12px;
  left: 0;
  width: 46px;
  height: 38px;
  background: #3a93d0;
  transform-origin: 0 100%;
  transform: rotate(29deg) skewX(-30deg);
}
.pentagon.bordered {
  background: white;
  border: 1px solid #3a93d0;
}
.pentagon.bordered:before {
  width: 44px;
  height: 37px;
  background: white;
  border: 1px solid #3a93d0;
  border-color: transparent #3a93d0 #3a93d0 transparent;
  transform: rotate(29deg) skewX(-30deg);
}
/* Just for demo */

.pentagon {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="pentagon"></div>
<div class="pentagon bordered"></div>

---

Using CSS Skew Transforms:

This approach uses just skew() (along both X and Y axes) and does not need any complex angle calculations. It just needs the dimensions and position of the pseudo-element to be adjusted as the dimension of the parent changes.

.pentagon {
  position: relative;
  height: 50px;
  width: 78px;
  border: 1px solid #3a93d0;
  border-bottom: none;
  background: aliceblue;
}
.pentagon:before {
  position: absolute;
  content: '';
  top: 10px;  /* parent height - child height -1px */
  left: -1px;
  width: 39px;
  height: 39px;  /* width of parent/2 */
  border-right: 1px solid #3a93d0;
  border-bottom: 1px solid #3a93d0;
  background: aliceblue;
  transform-origin: 0 100%;
  transform: matrix(1, 0.414213562373095, -1, 0.41421356237309515, 0, 0);
}

<div class="pentagon">
</div>

The above snippet uses matrix transform because as per MDN, the skew(x, y) is removed and should not be used anymore. The Matrix Resolutions site can be used to obtain the equivalent matrix function. The matrix function for rotate(45deg) skew(-22.5deg, -22.5deg) is

matrix(1, 0.414213562373095, -1, 0.41421356237309515, 0, 0).

---

Using Clip Path:

Here is another approach to creating the pentagon shape with clip-path. Either a pure CSS clip-path or one with inline SVG can be used depending on required browser support. CSS clip-path is supported only by Webkit browsers at present.

IE (all versions) do not support either the CSS or the SVG clip-path.

.pentagon {
  position: relative;
  width: 75px;
  height: calc(75px / 1.414);
  background: #3a93d0;
}
.pentagon.css {
  -webkit-clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
  clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
}
.pentagon.svg {
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}
.pentagon.bordered:after {
  position: absolute;
  content: '';
  height: calc(100% - 2px);
  width: calc(100% - 2px);
  left: 1px;
  top: 1px;
  background: white;
}
.pentagon.css.bordered:after {
  -webkit-clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
  clip-path: polygon(0% 0%, 0% 66%, 50% 100%, 100% 66%, 100% 0%);
}
.pentagon.svg.bordered:after {
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}
/* Just for demo */

.pentagon {
  margin: 10px;
}

<svg width="0" height="0">
  <defs>
    <clipPath id="clipper" clipPathUnits="objectBoundingBox">
      <path d="M0,0 0,0.66 0.5,1 1,0.66 1,0z" />
    </clipPath>
  </defs>
</svg>

<h3>CSS Clip Path</h3>

<div class="pentagon css"></div>
<div class="pentagon bordered css"></div>

<h3>SVG Clip Path</h3>
<div class="pentagon svg"></div>
<div class="pentagon bordered svg"></div>

这篇关于与一个元素的半六角形形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！