Html 获得一个透明的坟墓。我该怎么做？

为了获得形状（封闭在坟墓状容器内的文本），我使用了以下设计：

（图像在背景中给出）

HTML:

现在，我想让坟墓透明。如下图所示：

---

我怎样才能做到这一点

这个答案可能不是您想要的答案，因为您已经标记了CSS。这个答案将使用javascript和HTML5。如果这不是你想要的，那么我还是想把它保存在这里，以供参考

我用HTML5画布重新创建了您的arc

它可以调整大小，您可以根据需要调整画布的大小

HTML：

<canvas id="myCanvas"></canvas> 

演示：

---

我不知道这是否适合您的需要，但您可以尝试以下方法：

HTML:

一些内容。。。

CSS:

正文{
颜色：白色；
字体系列：无衬线；
背景图片：url(http://www.mooneyfarms.com/public/uploads/backgrounds/bg-body1.jpg);
}
.坟墓{
边框：5px纯白；
边界顶部：无；
填充：10px；
填充顶部：15px；
宽度：400px；
边缘顶部：130像素；
位置：相对位置；
背景图像：线性渐变（向右，白色31%，透明31%，透明70%，白色70%）；
背景位置：左上角；
背景尺寸：100%5px；
背景重复：无重复；
}
格雷夫：以前{
内容：“；
边框：5px纯白；
边界半径：50%50%；
宽度：160px；
高度：160px；
位置：绝对位置；
顶部：-80px；
左：50%；
左边距：-85px；
剪辑：矩形（0px，170px，85px，0px）；
}

---

演示：

如果要使用SVG。我建议使用Adobe Illustrator（非免费）或Inkscape（Linux、Windows和Max上免费提供）等程序创建形状，然后使用文本编辑器打开文件并将代码粘贴到HTML中

您可以检查此小提琴：

这里有一些SVG提示：

代码：

.背景{
宽度：200px；
高度：300px；
背景色：#3b6；
位置：相对位置；
}
.坟墓{
高度：300px；
宽度：200px；
位置：绝对位置；
顶部：60px；
左：10px；
}
.文本{
字体系列：无衬线；
位置：绝对位置；
宽度：150px；
左：22px；
文本对齐：居中；
顶部：120px；
颜色：#fff；
}

仅限css3？你可以使用背景属性！我不需要

正文.grave:before

部分。但是如果我离开它，我就看不到确切的剪切+1，因为在阅读你的答案之前我从未听说过“clip”属性。我编辑了我的答案，而不是

背景附件：固定的
我用
线性渐变
替换了上边框。它应该适用于所有现代浏览器。
.front-page-products-title {
    position: relative;
    display: inline-block;
    width: 21em;
    height: 6em;
    border: 0.5em solid white;
    top: 0em;
    text-align: center;
    padding-top: 4em;
    color: white;
    font-family: calibri;
    text-transform: uppercase;
    z-index: 5;

}
.front-page-products-title::before {
   position: absolute;
    border: 4em solid white;
    border-bottom: none;
    border-top-right-radius: 4em;
    border-top-left-radius: 4em;
    left: 7em;
    top: -4em;
    content: '';
    z-index: 3;


}
.front-page-products-title::after {
    position: absolute;
    border: 2.5em solid white;
    border-bottom: none;
    border-top-right-radius: 2.5em;
    border-top-left-radius: 2.5em;
    left: 9.5em;
    top: -2.5em;
    content: '';
    z-index: 1;

}

<canvas id="myCanvas"></canvas> 

var canvasWidth = 300;
var canvasHeight = 205;
var lineWidth = 6;
var boxWidth = 300;
var boxHeight = 150;
var boxX = 0;
var boxY = 50;
var arcMiddleX = 150;
var arcMiddleY = 50;
var arcRadius = 50;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.canvas.width = canvasWidth;
ctx.canvas.height = canvasHeight;
var text = "JUNIOR GOLFERS";
ctx.strokeStyle = "#FFF";
ctx.fillStyle = "#FFF";
ctx.lineWidth = lineWidth;
ctx.beginPath();
ctx.arc(arcMiddleX, arcMiddleY+lineWidth, arcRadius, Math.PI, 0);
ctx.strokeRect(boxX, boxY+lineWidth, boxWidth, boxHeight);
ctx.clearRect(boxWidth/2 - arcRadius + lineWidth/2, arcRadius + lineWidth/2, arcRadius*2 - lineWidth, 6);
ctx.font="20px calibri";
ctx.fillText(text, boxWidth/2 - ctx.measureText(text).width/2, boxHeight/2+arcRadius);
ctx.stroke();

<svg width="180" height="143.15192">
  <defs id="defs4"/>
  <g transform="translate(-52.350752,-620.12034)">
    <path d="m 142.35075,620.12034 c -30.90366,0 -56.175164,24.10256 -58.041341,54.53653 l -31.958657,0 0,88.61539 179.999998,0 0,-88.61539 -31.96731,0 c -1.86618,-30.43397 -27.12902,-54.53653 -58.03269,-54.53653 z m 0,4.45673 c 29.52862,0 53.51131,24.30538 53.98269,54.47596 l 31.86347,0 0,80.30769 -171.692311,0 0,-80.30769 31.854808,0 c 0.471357,-30.1706 24.462713,-54.47596 53.991343,-54.47596 z" style="fill:#ffffff;fill-opacity:1;stroke:none" />
  </g>
</svg>

.background {
  width: 200px;
  height: 300px;
  background-color: #3b6;
  position: relative;
}

.tomb {
  height: 300px;
  width: 200px;
  position: absolute;
  top: 60px;
  left: 10px;
}

.text {
  font-family: sans-serif;
  position: absolute;
  width: 150px;
  left: 22px;
  text-align: center;
  top: 120px;
  color: #fff;
}