Question

我需要找到以下代码的响应式解决方案。

HTML：

<span>&nbsp;</span><span>&nbsp;</span><span>YES!</span>

CSS：

span {
 color: #bac12d;
 background-color: #213d55;
 display: inline-block;
 position: relative;
 margin-right: 10px;
 margin-left: 30px;
 font-size: 80px;
 line-height: 1;
}
span:before {
 content: "";
 display: inline-block;
 border-left: 20px solid transparent;
 border-top: 40px solid #213d55;
 border-right: 0px solid #213d55;
 border-bottom: 40px solid #213d55;
 position: absolute;
 z-index: -1;
 top: 0;
 left: -20px;
}
span:after {
 content: "";
 display: inline-block;
 border-left: 20px solid #213d55;
 border-top: 40px solid transparent;
 border-right: 0px solid transparent;
 border-bottom: 40px solid transparent;
 position: absolute;
 z-index: -1;
 top: 0;
 right: -20px;
}
span:nth-child(-n+2){
  width: 0px;
}

这是我的小提琴：

http://jsfiddle.net/283azx0t/

是否可以使其响应以使其符合字体大小？

Answer 1

是的，这可以通过媒体查询实现。根据不同的屏幕尺寸，更改字体大小和背景箭头大小。

Answer 2

是的，这可以用EM单位。

这是一个粗略的小提琴： http://jsfiddle.net/zbetxu8g/1/

以下是您希望为该方法做的事情，但选择更好的em测量：

span:before {
  ...
  border-left: 2em solid transparent;
  border-top: 4em solid #213d55;
  border-right: 0px solid #213d55;
  border-bottom: 4em solid #213d55;
  ...
  left: -2em;
}

响应右键指向CSS V形臂？可能？

2 个答案: