Jump to content
  • 0

Кнопка с углом


sond1k
 Share

Question

Добрый день!

Пытаюсь сделать кнопку - вот что получилосьimage.png

Уголок сделан через псевдо-элемент и свойства transform:translateX(-25px)rotate(45deg)skew(10deg, 10deg)scale(0.61);

Мне нужно синюю рамочку вокруг уголка - как вокруг родительского блока. Если добавлять рамку к треугольнику, то во первых из за scale она не тех размеров, во вторых портится градиент. Подскажите пожалуйста, как сделать рамку?

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Делаете ещё один такой псевдоэлемент, сдвигаете вправо и закрашиваете синим.

Да, я думал об этом, но, второй псевдоэлемент мне необходим для текста внутри кнопки, т.к. иначе в IE не будут наследоваться :active для родителя, если разместить текст не через псевдо элемент

Хотя, странно, текст обернутый в span - active не наследуется. Текст без span - все работает, вопрос снят, спасибо

Link to comment
Share on other sites

  • 0

Делаете ещё один такой псевдоэлемент, сдвигаете вправо и закрашиваете синим.

Нет, к сожалению, Ваш совет приводит к тому же эффекту. Подобрать размер рамки под рамку родительского - не выходит

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

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