css - 在纯 CSS、CSS/SVG 或 CSS/HTML5 中构建动态和可重用图形元素的最跨浏览器安全方式

Question

关闭。这个问题需要更多focused .它目前不接受答案。












想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post .

7年前关闭。




Improve this question




1. 目标

我正在研究一种高度动态、可扩展的块/内联块级元素样式。它看起来像这样:



2. 我真正需要的

从我的选项中进行选择的建议，基本上。什么方法与作为主要关注点的跨浏览器友好性和可扩展性最兼容？

我使用 SASS 来渲染我的 CSS，所以 <style>我的示例中的元素是伪代码。我希望能够使用明确定义的类层次结构动态控制以下内容:

文本内容(特殊)

高度(高度可变)

宽度(5 种可能的宽度；我正在 Zurb 的 Foundation 5 中开发，元素将始终在 1 到 5 列之间)

背景颜色(这里只有 2-5 个选项)

颜色(这里只有 3 个选项)

方向(L＆R可能就足够了)

3.我尝试过的东西

位图

这不好；我必须制作太多并且无法控制点的 Angular ，因为它跨越高度。

纯 CSS

这是我期望我必须做的。

<!-- the HTML -->
<div class="arrow-label">
    <h4 class="expand"><?php echo $label-text;?></h4>
    <a href="#" class="triangle right-facing"></a>
</div>

<style>
  div.arrow-label {
    h4 {
      display:inline-block;
      background-color: $arrow-label-background-color;
    }
     .triangle { background-color: $arrow-label-background-color; }
  }

.triangle {
  width:0;
  height:0;
  display:inline-block;
  margin:0;
  border-style: solid;
  transition: border-color 300ms ease-out; 
  // I have removed transitional selectors (ie. :hover) below for brevity's sake

    &.up-facing {
      border-width: 0 rem-calc(12px) rem-calc(15px) rem-calc(12px);
      border-color: transparent transparent $triangle-color transparent;
    }
    // rinse/repeat for .left-facing, .right-facing, .bottom-facing

    &.disabled {
       transition:none;
       color: $triangle-disabled-color;
    }

    &.inherited-transition { transition: inherit}
  }
</style>

SVG

所以我要承认，我只是粗略地了解如何利用我所知道的 SVG 非常强大的潜力，在这里。我已经在 Illustrator 中生成了这个 SVG，但我认为它可能需要修改才能像我想要的那样可扩展:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="635.436px" height="156.041px" viewBox="0 0 635.436 156.041" enable-background="new 0 0 635.436 156.041"
     xml:space="preserve">
<polygon fill="#333333" points="576.576,155.254 635.436,78.02 576.576,0.787 576.576,0 575.976,0 575.976,0 575.976,0 0,0 
    0,156.041 576.576,156.041 "/>
</svg>

但不要完全理解如何使用它；例如，我认为，如果我将其用作 background-image，我将无法实现目标。否则包含文本的元素的属性参数；但我也不知道这是如何通过 CSS 即时完成的。

更新

一条评论要求编译的 CSS，在这里；我还没有检查颜色，我希望它们目前是荒谬的，但除此之外，我认为这涵盖了它:

/* The element itself */
div.arrow-label h4 {
  display: inline-block;
  background-color: #323232;
}


/* the code I use to make triangles, and in this case, would be capping the element with 
   note that, as per the standard, 1rem = 16px here */
.triangle {
  width: 0;
  height: 0;
  display: inline-block;
  margin: 0;
  border-style: solid;
  transition: border-color 300ms ease-out;
}

.triangle.up-facing {
  border-width: 0 0.75rem 0.9375rem 0.75rem;
  border-color: transparent transparent #ff5555 transparent;
}

.triangle.up-facing:hover {
  border-color: transparent transparent #ffa1a1 transparent;
}

.triangle.up-facing:active {
  border-color: transparent transparent #683939 transparent;
}

.triangle.down-facing {
  border-width: 0.9375rem 0.75rem 0 0.75rem;
  border-color: #ff5555 transparent transparent transparent;
}

.triangle.down-facing:hover {
  border-color: #ffa1a1 transparent transparent transparent;
}

.triangle.down-facing:active {
  border-color: #bb0000 transparent transparent transparent;
}

.triangle.right-facing {
  border-width: 0.75rem 0 0.75rem 0.9375rem;
  border-color: transparent transparent transparent #ff5555;
}

.triangle.right-facing:hover {
  border-color: transparent transparent transparent #ffa1a1;
}

.triangle.right-facing:active {
  border-color: transparent transparent transparent #683939;
}

.triangle.left-facing {
  border-width: 0.75rem 0.9375rem 0.75rem 0;
  border-color: transparent #ff5555 transparent transparent;
}

.triangle.left-facing:hover {
  border-color: transparent #ffa1a1 transparent transparent;
}

.triangle.left-facing:active {
  border-color: transparent #683939 transparent transparent;
}

.triangle.disabled {
  transition: none;
  color: #ffa1a1;
}

.triangle.inherited-transition {
  transition: inherit;
}

Answer 1

SVG 文件(简化代码)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100" >
    <polygon fill="#333" points="0,0 460,0 500,50 460,100 0,100" />
</svg>

CSS 文件，或嵌入 <style>

#my_block{
    width: 190px;
    height: 40px;
    background-image: url(../images/arrow.svg);/*change to the svg url*/
    background-position: right center;
    background-size: auto 100%;
    transition: 100ms 200ms ease-out;
}
#my_block:hover{
    width: 200px;
    transition: 100ms ease-out;
    opacity: 0.7;
}

HTML(div 可以是 ul、p、内联块等)

<div id="my_block"></div>