如何创建自定义形状 - css [英] How to create a custom shape - css

问题描述

我要创建一个自定义形状，如下图所示：

我该怎么办？

p>

  #chevron {
 position：relative; 
 text-align：center; 
 padding：12px; 
 margin-bottom：6px; 
 height：60px; 
 width：200px; } 
 
 #chevron：before {
 content：''; 
 position：absolute; 
 top：0; 
 left：0; 
 height：100％; 
 width：51％; 
 background：＃337AB7; 
 -webkit-transform：skew（0deg，6deg）; -moz-transform：skew（0deg，6deg）; 
 -ms-transform：skew（0deg，6deg）; 
 -o-transform：skew（0deg，6deg）; 
 transform：skew（0deg，6deg）; } 
 
 #chevron：after {
 content：''; 
 position：absolute; 
 top：0; 
 right：0; 
 height：100％; 
 width：50％; 
 background：＃337AB7; 
 -webkit-transform：skew（0deg，-6deg）; -moz-transform：skew（0deg，-6deg）; -ms-transform：skew（0deg，-6deg）; -o-transform：skew（0deg，-6deg）; transform：skew（0deg，-6deg）; } 
  

我的HTML档案：

 < div id =chevron> 
 
< / div> 
  

但我的结果不是我想要的结果：

$ b b

c> c c c $ c>：之后稍微降低 top：20px ，因此它们不会达到div的顶部

示例

这里是 fiddle ：

  #chevron {width：350px; height：100px;背景：＃337AB7; border-radius：10px 10px 0 0; position：relative;}＃chevron：before {content：''; position：absolute; top：20px; left：0;高度：100％;宽度：51％;背景：＃337AB7; -webkit-transform：skew（0deg，6deg）; -moz-transform：skew（0deg，6deg）; -ms-transform：skew（0deg，6deg）; -o-transform：skew（0deg，6deg）; transform：skew（0deg，6deg）;}＃chevron：after {content：''; position：absolute; top：20px; right：0;高度：100％; width：50％;背景：＃337AB7; -webkit-transform：skew（0deg，-6deg）; -moz-transform：skew（0deg，-6deg）; -ms-transform：skew（0deg，-6deg）; -o-transform：skew（0deg，-6deg）; transform：skew（0deg，-6deg）;}  

  ; div id =chevron>< / div>  

I would like to create a custom shape like this image :

how can I do ?

My CSS :

#chevron { 
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px; 
  width: 200px; }

#chevron:before { 
  content: ''; 
  position: absolute;
  top: 0; 
  left: 0;
  height: 100%;
  width: 51%;
  background: #337AB7;
  -webkit-transform: skew(0deg, 6deg);    -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg); }

#chevron:after { 
  content: ''; 
  position: absolute;
  top: 0; 
  right: 0;
  height: 100%;
  width: 50%;
  background: #337AB7;
  -webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); }

My HTML file :

<div id="chevron">

</div>

But my result isn't what I want :

解决方案

• Add the background color to the parent div to fill in the gap
• Place the border-radius on the parent div to create the two rounded corners
• Move the :before and :after down slightly with top: 20px so they don't peak out the top of the div

Example

Here is a fiddle of the below:

#chevron {
  width: 350px;
  height: 100px;
  background: #337AB7;
  border-radius: 10px 10px 0 0;
  position: relative;
}
#chevron:before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  height: 100%;
  width: 51%;
  background: #337AB7;
  -webkit-transform: skew(0deg, 6deg);
  -moz-transform: skew(0deg, 6deg);
  -ms-transform: skew(0deg, 6deg);
  -o-transform: skew(0deg, 6deg);
  transform: skew(0deg, 6deg);
}
#chevron:after {
  content: '';
  position: absolute;
  top: 20px;
  right: 0;
  height: 100%;
  width: 50%;
  background: #337AB7;
  -webkit-transform: skew(0deg, -6deg);
  -moz-transform: skew(0deg, -6deg);
  -ms-transform: skew(0deg, -6deg);
  -o-transform: skew(0deg, -6deg);
  transform: skew(0deg, -6deg);
}

<div id="chevron"></div>

这篇关于如何创建自定义形状 - css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！