您可以使用 SVG 图像,它可以在任何尺寸下清晰渲染并适应元素的尺寸,它看起来像这样......
\n\n.button {\n background: #000;\n float: left;\n position: relative;\n color: #999;\n font: 15px/130% Arial, sans-serif;\n padding: 10px 20px;\n clear: both;\n margin: 10px;\n border-radius: 5px 0 0 5px;\n}\n\n.button:after {\n content: \'\';\n display: block;\n width: 10px;\n position: absolute;\n right: -10px;\n height: 100%;\n top: 0;\n background: transparent url(\'triangle.svg\') 0 0 no-repeat;\n}\nRun Code Online (Sandbox Code Playgroud)\n\n\n\n\xe2\x80\x8b这个 jsfiddle 只能在 Webkit 中工作,因为我已经内联了 svg,这样你就可以理解它是如何工作的,但是如果你从外部文件加载它,它应该可以正常工作。以下是效果图供参考:
\n\n