相关疑难解决方法(0)

如何在CSS中制作3角圆角三角形

我想使用没有Javascript来实现这样的自定义颜色形状: 3角圆角三角形

目前我在橙色矩形div上覆盖了"框架"的图像,但这非常黑客.我想我可以使用动态生成的canvas元素,但这不仅需要JS,还需要HTML5 canvas支持.有任何想法吗？

css css3 css-shapes

Mur*_*ith

2016 11-29

37
推荐指数

6
解决办法

5万
查看次数

如何在六边形的右侧添加彩色阴影？

谢天谢地，我在 SO 上找到了一个六边形，但现在我遇到了问题。六边形可以用任何颜色填充 - 目前是橙色，但我需要用颜色和阴影填充它：

<svg viewBox="0 0 180 100" style="width:180px;height:130px">
  <defs>
    <clipPath id="hexagon_clip">
      <path id="hexagon" d="M38,2 
           L82,2 
           A12,12 0 0,1 94,10 
           L112,44 
           A12,12 0 0,1 112,56
           L94,90       
           A12,12 0 0,1 82,98
           L38,98
           A12,12 0 0,1 26,90
           L8,56
           A12,12 0 0,1 8,44
           L26,10
           A12,12 0 0,1 38,2" />
    </clipPath>
  </defs>
  <use xlink:href="#hexagon" x="0" y="0" stroke="orange" stroke-width="12" fill="transparent" />
</svg>

Run Code Online (Sandbox Code Playgroud)

这是我要重新构建的当前示例：

所以我的目标是在最后传递一个颜色十六进制代码。这可能吗？

彩色阴影是指每个六边形右侧的较深颜色。抱歉不清楚！

html css svg css-shapes

Mr.*_* Jo

2021 01-16

6
推荐指数

1
解决办法

146
查看次数

制作带有边框,圆角和透明背景的六边形

我想在CSS3中制作一个带有边框,圆角和透明背景的六边形,如下图所示:

我不能用圆角和边框做这个.

我的代码在这里:

#hexagon-circle {
  position: relative;
  margin: 1em auto;
  width: 10em;
  height: 17.32em;
  border-radius: 1em/.5em;
  background: red;
  transition: opacity .5s;
  cursor: pointer;
}
#hexagon-circle:before {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
  -webkit-transform: rotate(60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
  -ms-transform: rotate(60deg);  /* IE 9 */
  transform: rotate(60deg); /* Firefox 16+, IE 10+, Opera */
}

#hexagon-circle:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
  -webkit-transform: rotate(-60deg);  /* …

Run Code Online (Sandbox Code Playgroud)

css svg css3 css-shapes

mil*_*dhp

2016 04-29

0
推荐指数

1
解决办法

5758
查看次数