превратить изображение в css

У меня есть это изображение (прилагается). Я не дизайнер, но я не хочу использовать изображение в своем приложении. Я слышал, что вы можете очень близко подойти к изображению, используя 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;

Проблема с вышеизложенным заключается в том, что у моего текста больше нет фона... если я использую background-color, то мне придется использовать border-left: 10px сплошной белый цвет, который не будет хорошо смотреться на разных фоновых изображениях, так как этот слой будет сидеть сверху на изображении.


css css-shapes
person Asim Zaidi    schedule 15.08.2012    source источник
comment
Вы получаете отрицательные голоса, потому что вопрос не показывает никаких исследовательских усилий - вы в основном просите нас сделать это за вас, что не приветствуется на SO.   -  person kapa    schedule 16.08.2012
comment
Во-первых, код, который вы разместили, кажется, работает, можете ли вы сказать нам, что именно не так? Во-вторых, почему вы не хотите использовать изображение в своем дизайне? Использование фонового изображения для такой формы гораздо более семантично и чище, чем использование трюков с границами CSS или SVG для рисования многоугольников.   -  person Mike Deck    schedule 16.08.2012
comment
его правильное добавление текста в div изображения   -  person Asim Zaidi    schedule 16.08.2012
comment
также не уверен, как добавить в css   -  person Asim Zaidi    schedule 16.08.2012
comment
@MikeDeck Я бы сказал, что CSS не обязательно должен быть семантическим. Использование трюков с границами для простых стрелок кажется мне абсолютно приемлемым, но это всего лишь мнение.   -  person kapa    schedule 16.08.2012
comment
В целом, я не думаю, что это плохой вопрос, хотя, возможно, его можно сформулировать лучше.   -  person Oleg    schedule 16.08.2012
comment
Фоновое изображение не является семантическим. Это чисто декорация.   -  person DA.    schedule 16.08.2012

Ответы (8)


arrow_upward
3
arrow_downward

Если у вас есть <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 Triangle.

демонстрация jsFiddle

EDIT: Или быстрая демонстрация с прозрачной стрелкой - здесь вы в основном используете различные цвета границ для сложных границ и способ перемещения стрелки влево — я использовал position: relative — поэтому фон div не будет закрывать то, что находится под ним.

person kapa    schedule 15.08.2012
comment
проблема в том, что он находится поверх изображения, и фон этого изображения не всегда будет белым ... поэтому он выглядит неуклюжим на других цветных изображениях. - person Asim Zaidi; 16.08.2012
comment
@Autolycus Я действительно не понимаю, что ты имеешь в виду. Не могли бы вы создать демо? Или вы имеете в виду, что белая стрелка должна быть прозрачной? Почему вы не упомянули об этом в своем вопросе? - person kapa; 16.08.2012
comment
да, белая стрелка должна быть прозрачной. извините, что не упомянул в вопросе - person Asim Zaidi; 16.08.2012
comment
@Autolycus Это все еще возможно. Краткая демонстрация, но с ней все еще можно поиграть. - person kapa; 16.08.2012
comment
+1 за отличное редактирование! Вместо этого вам действительно следует использовать content: '';, иначе точка будет видна с вашими текущими настройками! - person Oleg; 17.08.2012
comment
@о.в. Спасибо, изменил content. - person kapa; 17.08.2012

arrow_upward
3
arrow_downward

В том смысле, что элементы HTML могут быть стилизованы, да, подобная форма может быть создана. Для этого вам придется использовать несколько DIV. Вот сайт, который дает хороший обзор создания основных геометрических фигур с использованием стилей границ:

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

person DA.    schedule 15.08.2012

arrow_upward
3
arrow_downward

Поскольку "Я не хочу использовать изображение в своем приложении" является довольно расплывчатым требованием, вы можете найти URI данных подходящий вариант:

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

Я большой поклонник их экономного использования - они устраняют необходимость в дополнительном HTTP-запросе, если изображение является внешним, они не требуют столько ресурсов для рендеринга на клиенте, как тяжелые спрайты, и они есть (за исключением большинства тривиальных случаев с графикой более простой, чем у вас) быстрее обрабатывается, чем эффекты CSS3.

Редактировать: кодирование base64 является частью некоторых реализаций предварительной обработки css LESS/SASS, и существуют онлайн-кодировщики, доступные для одноразового использования, например этот (только не забудьте удалить все разрывы строк из данных uri)

Поиграл

person Oleg    schedule 15.08.2012
comment
@Autolycus: если оно не будет произвольно изменено (статические ресурсы не должны - по крайней мере, не нравится это), у вас не возникнет проблем с загрузкой, кодированием и включением изображения в ваш css. - person Oleg; 16.08.2012

arrow_upward
2
arrow_downward

Если все, что вы хотите сделать, это избежать ссылки на внешний файл изображения, вы можете напрямую встроить изображение в свой 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-адрес данных изображения для свойства css background-image, но вы также можете использовать тот же URL-адрес для атрибута src тега <img>.

person Mike Deck    schedule 15.08.2012

arrow_upward
1
arrow_downward

Кажется, вы хотите векторное изображение. Вы можете использовать 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/

person alf    schedule 15.08.2012

arrow_upward
1
arrow_downward

Вот пример для начала:

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/

person Andrew    schedule 15.08.2012
comment
Пожалуйста, не отвечайте на вопросы одной ссылкой на jsFiddle. Попробуйте отредактировать соответствующие части вашего кода в своем ответе. - person kapa; 16.08.2012

arrow_upward
0
arrow_downward

Вот хорошее начало того, что вы можете сделать.

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

См.: в действии

person meme    schedule 15.08.2012

arrow_upward
0
arrow_downward

Я еще не видел здесь подхода с использованием псевдоэлементов, поэтому решил добавить его сюда. Это предполагает, что вы задаете свой 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>

person jbutler483    schedule 26.03.2015