1

我有这张图片（附件）。我不是设计师，但我不想在我的应用程序中使用该图像。我听说你可以非常接近使用 css 的图像。有人可以帮我处理这张图片并变成一个css等价物吗

谢谢！

在此处输入图像描述

尝试过

<span class="xyz">
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <polygon points="0,0 100,0 100,40 0,40 20,20" style="fill:#46b"/>
   </svg>
   text
</span>

不知道如何将其添加到我当前的 css 也尝试过

display: block;
clear: both;
width: 70%;
height: 2%;
float:right;
margin-top: -50%;
margin-right: 2%;
border-left: 10px solid transparent;
border-top: 4px solid #546aa4;
border-bottom: 4px solid #546aa4;

上面的问题是我的文本不再有背景...如果我使用背景颜色，那么我将不得不使用左边框：10px 纯白色，这在不同的背景图像上看起来不太好，因为这一层会坐在图像的顶部。

4

8 回答 8

3

如果你有<div class="magic">，你可以应用这种风格：

.magic { 
    width: 200px; 
    height: 50px; 
}
.magic:before {
    content: '.';
    float: left;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-left: 25px solid white;
    border-bottom: 25px solid transparent;
}

​根据自己的口味更改尺寸。这个技巧被称为CSS 三角形。

jsFiddle 演示

编辑：或者一个带有透明箭头的快速演示- 在这里你基本上使用不同的边框颜色来处理棘手的边框以及将箭头向左移动的方法 - 我使用过position: relative- 所以 div 的背景不会覆盖下面的内容。

于 2012-08-15T21:45:59.180 回答
3

“我不想在我的应用程序中使用图像”是一个相当模糊的要求，您可能会发现数据 URI是一个合适的替代方案：

.xyz{
  background:url(data:image/png;base64,/*encoded image*/);
}

我非常喜欢谨慎使用它们——如果图像是外部的，它们不需要额外的 http 请求，它们不需要客户端上的渲染资源，因为它们是重精灵（除了大多数微不足道的情况图形比你的更简单）渲染速度比 CSS3 效果快。

编辑： base64 编码是一些 LESS/SASS css 预处理实现的一部分，并且有在线编码器可供一次性使用，例如这个（只要记住从数据 uri 中删除所有换行符）

摆弄

于 2012-08-15T22:24:23.130 回答
3

从某种意义上说，HTML 元素可以设置样式，是的，可以创建这样的形状。您必须使用多个 DIV 来完成它。这是一个网站，它很好地概述了使用边框样式创建基本几何形状：

http://css-tricks.com/examples/ShapesOfCSS/

于 2012-08-15T21:41:33.810 回答
2

如果您只想避免链接到外部图像文件，则可以将图像直接嵌入到 css 或 html 中。

这是一个例子：

<!doctype html>
<html>
<head>
   <title>CSS Image Data Example</title>
   <style>
      #imgHolder {
         background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAvCAYAAACmGYWkAAADs0lEQVR42u2dS2sVSRSAjRoyGh8bNyKIiO+NgiCIOPhaGNQBb1clPggEF53b1bk4I4qIrwvqHxDECeqEpKqu4W5cCIIrt4rPhU9EGVz4REEFh9EZ4+mHN53Ef+B34IObe7t7ceCj6tSp6oxTxn0W/hO+CkMAMMw4ZewpbfwF+eOpfBZZPKIAfBdke1ibIYIsU5E7oI27KV/+Q2IAckGq1er4rq6+X3S3W6Jivz8w7r788IXkAIgg3yMMe5uDnr5FMooclx/uyojyLwkCBClEIklHPLhA6pBqYOwjueB/kgQIUgit6xN0RaZbxh6WCx6SJECQ0TE01LTt9/NzpB45KHXJg8B4ahJAkGIkxbs2dp5cZNKaJEYSQJARsTy80VwKe2fKdOuoXPxYMZIAgowdSTrifincbVVueCB8opkICDKqcN9qBheryB8SUW6pmCVgQJBRS8A3mnVkFwaROyI33s62pZBAQJARfZJUktjuSSVhJAEEGRlrqlcmBt1+voiyjz4JIMiPapJ6fYIu98/SMt3Sxr1RUbpdnoQCghQjiPxckeOYiHJHU5MAgoyNUmhnJnu3smYiNQkgyJg+SRDWFqnI7k+XgNPzJPRJAEFGbnCM7MKscLdXs2YiyQUEaURb5WTLDqlJRJI9MtW6l59zJ8mAIMWRJFsCdkfS8yRscAQE+cF0a3d9dsn4oypy15huAYKMPVDS1FZx09qN3a5ie51EA4IMR1P6EoiyXyFTrBOBcU9INCBIHp17L7cGkd8QxM5Lsf6UBiIgSD5ytFUutZTKbpWIcU4e/koZm7z0gZ4I/PSCNO2UmkNFdrU89LTwnDeiAII0eiCXWtpj/6uMGE54jRyAIIVlXdVj18jD/lRROnKQWECQVI4/6pNKxq8NIjcgD3vByAEIkvc5koNTiRza2Av5tIqEAoKkS7mdA60dFbs0ML5PHvKRfVeAIPnI0bl3oFVVzq9Wsf9LGc/IAQjSqDlMfYqK3XoV+TNy8zsSCAhS6HPontq6wNizWZ/DUpADgiSxa9e5qarcv1luqAXGPaPmAAQp9Dnay25VEDkvU6u3yAEIUnxRXLdbIqNGX1aQc9YcEKTRBMwKcntG6o4PJAsQpCCHjmsr071VvBQOEGT4P0slS7na2I3ZtIq9VYAgjSagDuvTdWQ3JatVwkvOcgCC5HJsCS9OTs5z6OQkYCYHfQ5AkCSSM+TZrlzbm29ZRw6ARJCOyuBS3WN/y6dV75EDoCCIFON/52LwcgWAUXwDOUawyI+Ht4oAAAAASUVORK5CYII=);
         width: 200px;
         height: 47px;
      }
   </style>
</head>
<body>
   <h1>Look, Ma, no external links!</h1>
   <div id="imgHolder">&nbsp;</div>
</body>
</html>

在这种情况下，我将图像数据 URL 用于 background-image css 属性，但您也可以将相同的 URL 用于标记的src属性。<img>

于 2012-08-15T21:56:38.187 回答
1

这是一个帮助您入门的示例：

HTML：

<div class="box">
    <div class="flag"></div>
</div>​

CSS：

.box {
    /* Set dimensions and color of containing box */
    width: 100px;
    height: 30px;
    background: #03e;
}

.flag {
    float: left;
    /* Set left border to control width and color of flag */
    border-left: 20px solid #fff;
    /* Set top and bottom border each to half of box height */
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    width: 0;
    height: 0;
}​

小提琴链接：http: //jsfiddle.net/kHDFp/

于 2012-08-15T21:46:05.390 回答
1

看来你想要一个矢量图像。您可以使用HTML svg 标签创建多边形：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <polygon points="0,0 100,0 100,40 0,40 20,20"
   style="fill:#46b"/>
 </svg>

http://jsfiddle.net/XDtXV/

于 2012-08-15T21:47:05.787 回答
0

这是您可以做的一个好的开始。

<style>
#button {
   width: 120px; 
   background: #546AA4; 
   border-left: 40px solid white;
   border-top: 24px solid transparent;
   border-bottom: 24px solid transparent;
}
</style>

<p id="button"></p>

见：在行动

于 2012-08-15T21:52:05.063 回答
0

我还没有在这里看到使用伪元素的方法，所以我想我会在这里添加一个。这是假设你给你的 div 一个设定的高度：

div{
  height:50px;
  width:200px;
  position:relative;
  margin-left:25px;
  background:tomato;
  }

div:before{
  content:"";
  position:absolute;
  top:0;
  left:-25px;
  border-top:25px solid tomato;
  border-left:25px solid transparent;
  }


div:after{
  content:"";
  position:absolute;
  bottom:0;
  left:-25px;
  border-bottom:25px solid tomato;
  border-left:25px solid transparent;
  }
<div></div>

于 2015-03-26T09:27:46.453 回答