我怎么能做这个形状？

Question

当我获得背景图片时，如何使用HTML和CSS制作以下内容。

<span class='some-cl'> defence personnel </span>

Answer 1

因此CSS的变体是可能的，但我的版本是你能找到的最丑陋的东西。看看：http://jsfiddle.net/7s4L0jhy/

我有一个半圆形的额外元素，但除此之外，它根据元素中的文字变化。

.p {
    border: 3px solid #fff;
    border-top: 0;
    display: inline-block;
    margin: 0 auto;
    padding: 30px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

然后我创建顶部栏，但为圆圈留出空间：

.p:before {
    content: '';
    position: absolute;
    right: calc(50% + 35px);
    left: -3px;
    height: 3px;
    top: 0;
    background: #fff;
}
.p:after {
    content: '';
    position: absolute;
    left: calc(50% + 35px);
    right: -3px;
    height: 3px;
    top: 0;
    background: #fff;
}

最后，假圈子很简单：

.p .bar {
    position: absolute;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    border: 3px solid #fff;
    border-left: 0;
    border-bottom: 0;
    border-right: 0;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
}

根据另一个答案，图像对你来说肯定会更容易，但这应该适用于任何东西ie10 +。祝你好运。

Answer 2

有很多方法可以解决这个问题。但是我认为这里的要求是高 可伸缩性 ，也就是说我们可以改变外部元素（包装器）的大小，并且形状应该相应地保持缩放。这样做需要一个与overflow:hidden相关的小技巧，顶部形状包括一个近半圆的中心和另外两条线，这里的技巧是我们需要修复连接到近端的两条线（两条线）半圈，让另一端自由，这样当放大/缩小overflow:hidden时，如果计算中出现任何错误，<div class='frame'> <div class='top'> <div class='peak'></div> </div> <div class='content'> Defense personnel </div> </div> 会切断这些结束。

以下是代码：

<强> HTML ：

.frame > .top, .top > .peak {
  position:absolute;
}
.frame {
  position:relative;
}
.frame > .top {
  overflow:hidden;
  left:-3px;
  right:-3px;
  padding-top:100%;
  bottom:100%;
}
.frame > .top:before, .frame > .top:after {
  content:'';
  position:absolute;
  border-top:3px solid white;    
  width:30%;
  bottom:0;
}
.frame > .top:before {
  right:70%; 
}
.frame > .top:after {
  left:70%;
}
.top > .peak {
  border:3px solid white;
  border-radius:50%;
  left:50%;
  width:40%;
  padding-top:40%;
  bottom:0;
  -webkit-transform:translate(-50%,44%);        
}
.frame {
  width:300px;
  height:200px;
  margin-top:100px;
  border:3px solid white;
  border-top:0;
}
.frame > .content {
  width:100%;
  height:100%;
  text-align:center;
  padding-top:20px;
  font-size:30px;
  color:white;
}
body {
  background:url(http://lorempixel.com/800/600);
}

<强> CSS ：

.frame

Demo

尝试调整{{1}}的大小，您会看到它的灵活性。

Answer 3

.some-cl{background:#003 /*bg color*/ url(your_image.jpg) no-repeat 50%; text-transform:uppercase; text-align:center; padding-top:40px /*adjust at will */ }

有更好更复杂的方法，但既然你问过非常基本的CSS问题，我认为这应该就够了