Jump to content
  • 0

Как сделать такой border

FitTech

Asked by FitTech,

 Share

Question

FitTech Explorer

FitTech

Posted
Posted

Здравствуйте! В макете есть блок с границей:h_1420795162_1776328_77d041e0c5.png

Подскажите пожалуйста как мне реализовать такой же блок с такой же границей только средствами CSS.

Легкий способ(просто вырезать блок и установить через background), но это ведь не правильно как я понял.

А  с border-img я не разобрался.

Заранее благодарен!

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0
npofopr Trainee

npofopr

Posted
Posted
Легкий способ(просто вырезать блок и установить через background), но это ведь не правильно как я понял.
если это решает вашу задачу, почему не правильно?

Такие ровные уголки с помощью css навряд ли сделать.

 

А вообще вот, но там только сверху, снизу. Можете еще поискать.

http://habrahabr.ru/post/176591/

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Здравствуйте! В макете есть блок с границей:h_1420795162_1776328_77d041e0c5.png

Подскажите пожалуйста как мне реализовать такой же блок с такой же границей только средствами CSS.

Легкий способ(просто вырезать блок и установить через background), но это ведь не правильно как я понял.

А  с border-img я не разобрался.

Заранее благодарен!

А я бы взял картинку чисто рамки зубчатой, растянул бы её background-size: 100% 100%; и проблема решена)

  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Twix
      Border
      By Twix
      Добрый день. Создал меню горизонтальное и по макету нужно сделать между меню полоску.
      как должно выглядеть: Фото меню

      Я ее добавил в <li>border-right: 1px solid #fff. и у последней ссылки ее нужно убрать. как сделать чтобы рамка не виднелась???

      хотел отдельно последний пункт меню взять в ид и убрать ее. но чтото не получается.
      <li id="contact_us">
      <a href="#">CONTACT US</a>
      </li>

      кроме как вставлять блок или картинку чтоб замазать ничего не приходит в голову. подскажите пожалуйста реально ли ее убрать через стили ?
    • dsljkeee
      border с пробелом
      By dsljkeee
      Доброго времени суток, как можно осуществить данную проблему?
      Как показано на картинке, в бордере имеется пространство которое заполнено иконкой, как именно сделать такое пространство? 

    • YurikMurik
      bootstrap колонки + рамка
      By YurikMurik
      Добрый день, форумчане! Необходимо сверстать данную страничку.
      Нужно, чтобы некоторые колонки были обвернуты рамкой + логотип. Есть мысля делать это все при помощи fieldset+legend. Но, как видно по картинке, блоки должны располагаться непосредственно от рамки и лого, не внутри филдсета. Также еще нужно, чтобы при наведении на блоки применялся hover-эффект (по дефолту на них стоит фильтр размывания, при наведении этот фильтр должен исчезать). 
      Собсна, в чем вопрос: как реализовать подобную рамку и лого, чтобы еще и до колонок смог достучаться ?

    • Launder
      Спозиционировать элемент в нужное место по горизонтали, не выводя из потока
      By Launder
      Вот кот. Предполагается, что элемент не выводится из потока (по крайней мере, нужно чтоб он взаимодействовал в "строке" с другими элементами, предполагается, что за block-center могут также находится элементы). Загвоздка следующая: левый блок (block-1) имеет минимальный размер в пикселях(150px) и натуральный размер в rem (15rem, при том, что 1rem = 10px). Хочется оставить пользователю возможность менять в браузере размер шрифта, при этом положение левого края второго элемента (block-center) должно оставаться посередине (или в ином заданном месте).
      Для второго элемента указано свойство:
      padding-left: calc(50% - 15rem); /* тут может быть и 150px*/ При использовании rem во-второй части выражения, элемент уходит вправо, при маленьком шрифте (отнимается меньше - отступ больше),
      если в выражении использовать пиксели, то элемент уйдёт вправо при большом шрифте (просто левый элемент увеличится).
      И в том, и в другом случае, для компенсации сдвига вправо, нужно сдвинуть элемент ВЛЕВО. Но сдвинуть не абсолютно, а при условии. Основные инструменты для сдвигов: марджины паддиги и бордеры прилежащих сторон элементов block-1 и block-center... Можно было бы как-то изловчится с паддингами (что-то вроде 15rem - 150px, положительное значение будет только при значении браузерного шрифта большего, чем по-умолчанию, значит только тогда он и начнёт работать), но паддинг может сдвинуть только вправо. Марджин может сдвинуть и туда и туда, но он безусловен, то есть, не может в одном случае сдвигать, а в другом - не сдвигать.
      Была идея как-то сделать, чтоб паддинг и марджин взаимно компенсировали друг друга, когда нам надо, а когда не нужно паддинг, стал меньше нуля, и исчез, но на практике мне не удалось это реализовать.
      В случае, когда отнимаем rem (в указанном выше коде), при нулевом font-size отступ максимален. Соответственно, сдвиг влево должен быть максимален и равняться ширине элемента block-1 в пикселях. Допустим ставим элементу block-center отрицательный левый марджин (или отрицательный правый марджин ставим block-1), сдвигая block-center на нужную величину, а, чтоб при увеличении шрифта отступ уменьшался, пишем block-1 {margin-right: calc(15rem - 150px)}, что при маленьких шрифтах будет сдвигать блок block-center влево, но при больших будет сдвигать вправо и как это компенсировать - не понятно.
      В случае, когда отнимаем px, при маленьких шрифтах всё хорошо, поскольку и block-1, и отступ - нужных размеров, но когда шрифт увеличивается, элемент block-1 увеличивается, а расстояние между блоками block-1 и block-center остаётся таким же, и опять-таки нужно каким-то образом компенсировать, а любой марджин - будет действовать в обе стороны, а паддинг - в одну, но только вправо, а мне нужно налево.
      В общем, не оставляют меня мысли, что тут можно применить какую-то хитрость и скомпенсировать увеличение отступа, при изменении шрифта, но что-то, как не изгаляюсь, паддинг сдвигает не туда, марджин сдвигает не только туда, но и не туда, при этом паддинг это "не туда" скомпенсировать не может, поскольку сам вылезает туда же, в "не туда"...
      Каким образом приручить эти элементы?
       
    • ya novenkiy
      почему рамка сплюснулась
      By ya novenkiy
      .border { border: 3px dashed orange; } <a href = "images/eye.jpg" class = "border"> <img src = "images/eye.jpg" width = "200" /> </a> а если убрать из ссылки, то норм.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept