turning an image into css

I have this image (attached). I am not a designer but I do not want to use the image in my app. I heard you can come very close to an image using css. Can someone help me with this image and turnning into a css equivalent

thanks!

enter image description here

TRIED

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

Not sure how to add that to my current css ALSO TRIED

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;

Issue with above is that my text has no background anymore... if I use background-color, then I will have to use border-left: 10px solid white, which is not going to look good on different background images as this layer will sit on top on an image.

标签： css css3 css-shapes

8条回答

别忘想泡老子

2楼-- · 2019-02-20 11:00

Here is a good start of what you can do.

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

See: In Action

0人赞添加讨论(0) 举报

甜甜的少女心

3楼-- · 2019-02-20 11:07

It seems that you want a vectorial image. You can use the HTML svg tag to create a polygon:

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

0人赞添加讨论(0) 举报

爷的心禁止访问

4楼-- · 2019-02-20 11:08

In the sense that HTML elements can be styled, yes, a shape like that could be created. You'd have to use multiple DIVs to accomplish it. Here's a site that gives a nice overview of creating basic geometric shapes using border styles:

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

0人赞添加讨论(0) 举报

家丑人穷心不美

5楼-- · 2019-02-20 11:08

I've yet to see an approach using pseudo elements here, so I thought I'd add one here. This is presuming that you're giving your div a set height:

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>

0人赞添加讨论(0) 举报

ら.Afraid

6楼-- · 2019-02-20 11:13

If all you want to do is avoid linking to an external image file you could embed the image in your css or html directly.

Here's an example:

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

In this case I used the image data URL for the background-image css property, but you could also use the same URL for the src attribute of an <img> tag.

0人赞添加讨论(0) 举报

Lonely孤独者°

7楼-- · 2019-02-20 11:15

Here's an example to get you started:

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

Fiddle link: http://jsfiddle.net/kHDFp/

0人赞添加讨论(0) 举报

1 2 下一页

turning an image into css

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间