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












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

7年前关闭。




Improve this question




1. 目标

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



2. 我真正需要的

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

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

<!-- 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>

<?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>

/* 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;
}

最佳答案

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>

#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;
}

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

关于css - 在纯 CSS、CSS/SVG 或 CSS/HTML5 中构建动态和可重用图形元素的最跨浏览器安全方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24536396/