小编jes*_*ica的帖子

我想创建一个html元素,例如div,其格式如下:

• 半透明背景色
• 所有边缘都有圆角边框
• div的左侧画一条直线
• div的右侧绘制了一条偏斜的线条

我想在CSS中创建它,并想知道这是否可行.到目前为止,我提出了两种不同的方法,这些方法有其自身的缺点并且还不够充分.你可以看看这个小提琴中的那些:

https://jsfiddle.net/n4tecna3/

.one-side-skew-1,
.one-side-skew-2 {
  font-size: 20px;
  padding: 2%;
  background-color: rgba(220, 50, 255, 0.6);
  position: relative;
  display: block;
  border-radius: 4px;
  z-index: 2;
  color: #ffffff;
  margin-top: 30px;
}
.one-side-skew-2 {
  border-top-right-radius: 0px;
}
.one-side-skew-1:after {
  height: 100%;
  width: 20%;
  position: absolute;
  top: 0;
  left: 85%;
  display: inline-block;
  content: "";
  background-color: rgba(220, 50, 255, 0.6);
  -moz-transform: skewX(-10deg);
  -webkit-transform: skewX(-10deg);
  -ms-transform: skewX(-10deg);
  -o-transform: skewX(-10deg);
  transform: skewX(-10deg);
  z-index: -1;
  border-radius: 4px;
}
.one-side-skew-2:after {
  border-top: 1em solid rgba(220, 50, …

我目前正在尝试使具有一到多个子元素的 DOM 元素尽可能易于访问。该元素将包含使用多层背景图像的说明性内容。我目前正在使用子元素来提供图像描述，如这篇关于如何在内容组内标记说明性内容的信息丰富的博客文章中所述。容器元素还可以包含其他包含文本内容的子元素。

示例元素当前如下所示：

<div tabindex="0" class="comic-panel">
  <span role="img" aria-label="There is a cat sitting in the window."></span>
  <div style="background-image: url(/assets/img/window.png);" class="comic-panel__layer"></div>
  <div style="background-image: url(/assets/img/cat.png);" class="comic-panel__layer"></div>
  <p class="speech-bubble">Meow!</p>
</div>

使用 OSX VoiceOver 进行测试，切换到此元素后，图像描述和文本可以正常读取，但随后还会发布以下公告：

是否可以以某种方式更新此元素的标记，使此group公告不是由屏幕阅读器发布？在几乎所有情况下，用户都无法在元素内部进一步探索或使用任何内容，因此此消息将是多余的，我希望 VoiceOver 不将元素识别为触发此消息的组。