Как добавить косую планку к кнопке

Вот что я сделал до сих пор:

#mybutton {
    background-color: #08c2f3;
    width: 200px;
    height: 35px;
    padding: 6px;
    color: white;
    font-size: 30px;
    font-family: sans-serif;
    text-align :center;
    border: 1px solid white;
}

body {
    background-color: #1599e1
}

#myBar {
    width: 100%;
    height: 9px;
    background: white;
    transform: rotateZ(-54deg);
    position: relative;
    left: 42px;
}

<div id = "mybutton">
  <span>OK</span>
  <div id = "myBar"></div>
</div>

но моя цель:

Как добавить косую планку к кнопке

css html

02.11.2018 11:33

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Просто добавьте overflow: hidden в родительский контейнер, так как он скроет вашу нежелательную часть, выглядывающую наружу.

#mybutton {
  background-color: #08c2f3;
  width: 200px;
  height: 35px;
  padding: 6px;
  color: white;
  font-size: 30px;
  font-family: sans-serif;
  text-align: center;
  border: 1px solid white;
  overflow: hidden;
}

body {
  background-color: #1599e1
}

#myBar {
  width: 100%;
  height: 9px;
  background: white;
  transform: rotateZ(-54deg);
  position: relative;
  left: 42px;
}

<div id = "mybutton">
  <span>OK</span>
  <div id = "myBar"></div>
</div>

02.11.2018 11:35

На самом деле вам вообще не нужен элемент «планка».

Этого можно добиться с помощью наклонного фонового градиента.

#mybutton {
  background: linear-gradient(124deg, #08c2f3 70%, white 70%, white 75%, #08c2f3 75%);
  width: 200px;
  height: 35px;
  padding: 6px;
  color: white;
  font-size: 30px;
  font-family: sans-serif;
  text-align: center;
  border: 1px solid white;
}

body {
  background-color: #1599e1
}

<div id = "mybutton">
  <span>OK</span>
</div>

02.11.2018 11:51

Другие вопросы по теме

Изменить значение в сеансе

Адаптивная навигационная панель Bootstrap с непрямоугольным заголовком

Горизонтальная прокрутка не работает при распределении пространства ячеек в процентах

Изменить эффект наведения для мобильных устройств

Настройка window.print ()

Поле ввода mat-form-field имеет тот же фон, что и страница, определенная с помощью CSS

Как использовать другой цикл внутри цикла for в JSON в API, используя php

AngularJS: поле отключается с помощью ng-disabled, но не может скрыться с помощью ng-hide

Получите количество символов в строке contenteditable div, где находится курсор

Получение табличной информации, ранее введенной в таблицу в js

Как добавить косую планку к кнопке

Ответы 2

Другие вопросы по теме

Похожие вопросы