CSS

Question

我这里有一个 jsfiddle - http://jsfiddle.net/0nvns9Lj/1/

我已经完成了我需要做的事情，但不知道这是否是最好的方法 - 我相信它应该更容易。

我只需要创建一个播放按钮，这样我就有了一个包含三角形的圆。

它在工作，但似乎为了一些简单的事情而搞得一团糟

        .wrap{
            background: #ddd;
            height: 300px;
            position: relative;
        }
        .circle{
            background: red;
            border-radius: 50px;
            height: 50px;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 50px;
            margin: -25px 0 0 -25px;
        }
        .circle_inner{
            position: relative;
            height: 100%;
        }
        .circle_inner:before{
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 0 10px 20px;
            border-color: transparent transparent transparent #ffffff;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -10px 0 0 -7px;
        }

Answer 1

没有太多需要改进的地方。

也许你可以使用像'Webdings'这样的特殊字体，否则你可以制作一个简单的CSS三角形。在这两种情况下，您只需要一个用于按钮的简单元素和一个用于形状的 ::before 伪元素。在下面的 HTML 和 CSS 中，显示了这两种方法。

两个按钮都使用普通的 A 元素，因此按钮（如果您能找到任何 url 或有用的 onclick 事件附加到它）仍然可以正常工作 link 当你连CSS都没有的时候（想想视障人士）。

此外，HTML 除了 class 名称之外不包含任何额外标记。不需要 'inner' 元素，我认为这是最重要的改进。 CSS 并不比你的短多少，但我去掉了 'inner' 元素，所以标记完全干净。

请记住：如果您想要更复杂的形状，您还可以使用 ::after 伪元素。 :)

/* Basic red round button properties */
.button {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: red;
  color: white;
  /* Hide the text 'play', which is present in the HTML document for accessibility */
  font-size: 0;
}

/* Properties for the pseudo-element that almost every button will need.
   You can just merge it into the style below if you are only going to have
   the play button. */
.button::before {
  content: "";
  display: block;
  position: absolute;
}

/* Play button properties using font */
.play1.button::before {
  font-family: 'Webdings';
  font-size: 28px;
  content: 'B6';
  top: -2px;
  left: 12px;
}

/* Play button properties using CSS shape */
.play2.button::before {
  width: 0; 
  height: 0; 
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
  border-left: 15px solid white;
  top: 10px;
  left: 16px;
}

<a href="#" class="play1 button" title="Play movie X">Play</a><br>
<a href="#" class="play2 button" title="Play movie X">Play</a>

Answer 2

你可以（并且应该）做的更简单。

* { margin:0; padding:0 }

figure {
  background: #ddd;
  height: 200px;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
}

figure button[name="play"] {
  width: 50px;
  height: 50px;
  background: red;
  border: none;
  border-radius: 100%;
  margin: auto;
  cursor: pointer;
}
figure button[name="play"]:focus {
  outline: 0;
  border: 1px solid hsl(210, 58%, 69%);
  box-shadow: 0 0 0 3px hsla(210, 76%, 57%, 0.5);
}

figure button[name="play"]::after {
  content: '';
  display: inline-block;
  position: relative;
  top: 1px;
  left: 3px;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent white;
}

<figure>
  <button name="play"></button>
</figure>

可编辑演示：http://jsbin.com/mipali/5

CSS - 创建播放按钮

CSS - Creating a play button

css-shapes