1

我有菜单项，其样式如下：

在此处输入图像描述

最后的箭头我用 :after pesudo-class 实现：

.ride-type-menu:after{
        content:"";
        border: 13px solid;
        border-color:  transparent #DBD7D7;
        border-right-color: transparent;
        right: -26px;
        top: 0;
        position: absolute;
        display: block;
    }

我遇到的问题是这些菜单项延伸到多行时：

在此处输入图像描述

任何人都可以想到一种方法（即使必要时使用图像），我可以根据菜单项占用的行数自动增加箭头的高度（保持宽度）以实现如下目的：

在此处输入图像描述

4

2 回答 2

2

好的！哈克解决方案来了！

你可以用 JS 来做到这一点，在你的菜单项中添加一个旋转的方形元素。您需要计算它的大小，使其对角线长度等于菜单项的高度。您还需要设置它的位置（您可以在 CSS 中静态地执行此操作），以便它的顶角位于菜单项的顶部边缘。

这是一个演示：http: //jsbin.com/oxaxet/2/edit

明显的问题是旋转元素的“宽度”随着父元素的高度而增长。我相信有可能通过转换进一步修复hackskew以解决这个问题，但是这个部分修复是我目前可以处理的所有数学。如果我稍后再戳它，我将编辑我的答案。

我认为用伪元素做你想做的事是不可能的，因为 1）CSS 不是程序化的，所以你不能计算尺寸 2）JS 不能接触伪元素*，所以一旦你计算了尺寸，你就不能申请他们。

我最接近纯CSS（使用伪元素）是使用top: 0和bottom: 0（或height: 100%也可以）:after使其高度与其父级相同，但之后无法border-width根据父级的高度设置值，所以随着父母的成长，箭头的尖端会被切断。

*iirc 这两个限制都有模糊的解决方法，但它们看起来从来没有足够可靠让我记住。如果您认为可以在这些方向上进一步破解，您可以自己查找“计算大小 CSS”或“javascript 伪元素”。

于 2012-10-11T00:48:43.410 回答
2

这是一个关于如何做到这一点的想法，使用 SVG 图像作为li背景，然后使用 CSSbackground-size属性调整它的大小。这适用于 IE 9、Firefox、Safari 和 Chrome，但在 Opera 中看起来有点时髦（可能有修复？）。

首先，您需要 SVG XML，将以下内容保存在一个新的文本文件中，将其保存为“right-arrow.svg”

SVG

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="152.18813"
   height="175.7317"
   id="svg2"
   preserveAspectRatio="none">
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(-37.842052,-201.63918)"
     id="layer1">
    <path
   d="m 37.842053,377.37089 -10e-7,-87.86586 0,-87.86585 76.094068,43.93293     76.09405,43.93293 -76.09406,43.93292 z"
       id="path2987"
       style="fill:#00f0ff;fill-opacity:1;stroke:none" />
  </g>
</svg>

然后使用这个：

HTML

<ul>
    <li>first</li>
    <li>first<br>second<br>third</li>
    <li>first<br>second</li>
</ul>

CSS

ul { margin: 0; padding: 0; list-style-type: none; }

li {
    margin-bottom: 5px;
    position:relative;
    width: 200px;
    background: url('right-arrow.svg') right center no-repeat;
    background-size: 15px 100%;
    padding: 15px;
}

li:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 0; left: 0;
    width: 215px; /* (li width + padding) - background-size width */
    height: 100%;
    background-color: #00f0ff;
    z-index: -1;
}

有点草率，但是您可以根据需要对其进行改进，这个想法就在那里。

于 2012-10-11T00:50:34.330 回答