Как изменить стили у первого элемента при наведении на второй элемент?

#html #css

Необходимо, чтобы при наведение на ссылку "Интернет магазин Арога" ссылка "Интернет
магазин Солана" меняла цвет.

Подскажите пожалуйста как это реализовать?



Пытался сделать так:



.sbm_top_link:nth-child(2):hover + .sbm_top_link a {
  color: #222222;
  background: #333333;
}

  Интернет магазин Солана 
  Интернет магазин Арога




    

Ответы

Ответ 1

ul {
    margin: 15px 0;
    text-align: center;
    font-size: 0;
}

ul > li {
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
}

ul > li > a {
    display: block;
    text-decoration: none;
    padding: 10px 15px;
    background: #ccc;
    color: #555;    
}

ul:hover > li > a {
    background: #000;
    color: #fff;
}

ul > li > a:hover {
    background: #999;
}

    
Интернет магазин Солана
    
Интернет магазин Арога



Ответ 2

Я всё-таки исхитрился и сделал вот такое чудо на CSS.
В Хроме работает, в FF и в IE11 - тоже.



div {
  display: flex;
}

a {
  background: antiquewhite;
  margin: .5em;
  padding: .5em;
}

.a1 { order: 1; }
.a2 { order: 2; }
.a1a, .a2a { position: absolute; }

a:hover { background: aquamarine; }
a:hover ~ a { background: silver; }
.a2:hover ~ .a1 { z-index: 1; }
.a1:hover ~ .a2 { z-index: 1; }

  Интернет магазин Арога
  Интернет магазин Солана 
  Интернет магазин Арога
  Интернет магазин Солана 



Ответ 3

Раз на то пошло, то вот ещё вариант:



#test {
  border: 0;
  height: 0;
  width: 0;
}

#test:hover + a {
  color: red;
}

  
  Интернет магазин Солана
  
  
    
    Интернет магазин Арога
    
  
  





https://jsfiddle.net/482y1c53/



Но лучше с помощью JS (ну или JQuery, как вам удобней):



(function () {

    var aroga = document.querySelector('.sbmts_bl :nth-child(2)');

    var solanaClassList = aroga.previousElementSibling.classList;

    aroga.addEventListener('mouseover', function () {

        solanaClassList.add('hightlight');

    });

    aroga.addEventListener('mouseout', function () {

        solanaClassList.remove('hightlight');

    });

})();
.sbm_top_link:nth-child(2):hover + .sbm_top_link a {
  color: #222222;
  background: #333333;
}

.hightlight {
  color: red;
}

  Интернет магазин Солана 
  Интернет магазин Арога





https://jsfiddle.net/pco94ys2/


Ответ 4

Если не принципиально, то в html меняем ссылки местами.
С помощью свойства direction: rtl; и табличного отображения, делаем вид, что никто
ни с кем местами и не менялся.
Применяем нужный селектор и получаем необходимый результат.




.sbmts_bl {
  border: 2px solid black;
}
.sbmts-bl__wrapper {
  border: 3px solid green;
  width: 400px;
  height: 40px;
  font-size: 0.8em;
  display: table;
  direction: rtl;
  margin-left: 50px;
}
.sbm_top_link {
  display: table-cell;
  border: 1px solid blue;
  text-align: center;
  vertical-align: middle;
}
.sbm_top_link:nth-child(1):hover + .sbm_top_link {
  color: white;
  background: black;
}

  

    Интернет магазин Арога
    Интернет магазин Солана 
  



Ответ 5

Наконец-то дошло, что отступов между ссылками нет. В таком случае всё элементарно.



nav {
  background: #777;
  padding: 0 3em;
}

div {
  display: inline-block;
}

a {
  display: inline-block;
  background: antiquewhite;
  padding: .5em;
}

div:hover a:hover {
  background: aquamarine;
}

div:hover a {
  background: silver;
}

  

    
      Интернет магазин Солана
    
      Интернет магазин Арога
    
      И ещё один
    
  





И даже ещё проще (хотя подойдёт только для фона и цвета текста):



nav {
  background: #777;
  padding: 0 3em;
}

div {
  display: inline-block;
  background: antiquewhite;
}

a {
  display: inline-block;
  padding: .5em;
}

div:hover {
  background: silver;
}

a:hover {
  background: aquamarine;
}

  

    
      Интернет магазин Солана
    
      Интернет магазин Арога
    
      И ещё один
    
  



Ответ 6

Мануал

E + F { Описание правил стиля }



  Для управления стилем соседних элементов используется символ плюса
  (+), который устанавливается между двумя селекторами E и F. Пробелы
  вокруг плюса не обязательны. Стиль при такой записи применяется к
  элементу F, но только в том случае, если он является соседним для
  элемента E и следует сразу после него.


Сделать через css без костылей не получится, Вам необходимо воспользоваться js/jquery.

UPD - пример кода на jquery



$(function() {
  $(".sbm_top_link:nth-child(2)").hover(
    function() {
      $(".sbm_top_link:nth-child(1)").addClass('test');
    },
    function() {
      $(".sbm_top_link:nth-child(1)").removeClass('test');
    }
  )
});
.test {
  color: #222222;
  background: #333333;
}


  Интернет магазин Солана  
  Интернет магазин Арога



Ответ 7

Ещё один вариант, основанный на дублировании ссылок. Но на этот раз простой. Работает
с любым числом ссылок, причём css от этого не зависит.

IE11+ и все остальные браузеры. В более ранних остальные ссылки не будут менять фон.



nav {
  position: relative;
}

a {
  display: inline-block;
  background: antiquewhite;
  margin: .5em;
  padding: .5em;
  position: relative;
  z-index: 0;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
}

a:hover {
  background: aquamarine;
  z-index: 1;
}

a:hover ~ div a {
  background: silver;
}

  Интернет магазин Солана
  Интернет магазин Арога
  Ещё какой-то интернет-магазин
  И ещё один
  Да много их
  Очень много
  

    Интернет магазин Солана
    Интернет магазин Арога
    Ещё какой-то интернет-магазин
    И ещё один
    Да много их
    Очень много
  

Как работать c русскими символами в файловых путях?

#python #python_3x #unicode #python_2x

У меня нет понимания как работать с путями в которых есть  русские символы. Возникает
несколько под-вопросов:


После применения os.walk(), к примеру подав sys.argv и получения root, subdirectories,
filenames в какой будут кодировке строки в этих трех переменных?
В какую кодировку я должен сконвертировать строки из п.1, чтобы суметь открыть файл
с помощью встроенной функции open()?
В какой кодировке я должен конвертировать строку, чтобы открыть файл по записи?
В какой кодировке имена файлов получаемые os.listdir()?
Для удаления файла с помощью os.remove в какой кодировке должна быть строка (путь
к файлу) после прочтения этой строки из файла с UTF-8 кодировкой?


Интересует ветка Python 3.x, но также интересно и как это делается в Python 2.x
    

Ответы

Ответ 1

Кратко: на Питоне 3 sys.argv приходит уже как текстовая (Unicode) строка, поэтому
ничего с ней делать не надо: передавайте как есть в os.walk(), open() и всё будет работать
(даже если locale сломана).

На Питоне 2 sys.argv это байты. На *nix системах это родной интерфейс, поэтому снова
ничего делать не надо, а просто передавать как есть.

На Windows, на Питоне 2, в общем случае следует руками получить sys.argv как Unicode,
потому что если символы, заданные в командной строке, непредставимы в ANSI кодировке
(например, cp1251), то sys.argv повреждённая до Питона доходит.


если вы уверены, что ввод всегда в Виндовой codepage представим, то просто argv0
= sys.argv[0].decode(sys.getfilesystemencoding()) используйте
если не уверены, то используйте GetCommandLineW() и CommandLineToArgvW(), чтобы произвольные
символы поддерживать без потерь.


Если помимо использования как аргументов open(), вы ещё хотите дальше с ними что-то
делать, например, напечатать в консоль/терминал, тогда на Windows ставьте win-unicode-console
пакет, начиная с Python 3.6 похожая функциональность встроена (PEP 528). На POSIX,
если есть непредставимые в текущей локали имена файлов(пути могут быть произвольным
набором байтов кроме b'\0' и b'\x2f'), то используйте os.fsencode() чтобы получить
исходные байты на Питоне 3 (дальше как текст такие строки не следуют передавать так
в них возможны lone surrogates из-за surrogateescape обработчика ошибок из PEP 383).




  После применения os.walk(), к примеру подав sys.argv и получения root, subdirectories,
filenames в какой будут кодировке строки в этих трех переменных?
  В какую кодировку я должен сконвертировать строки из п.1, чтобы суметь открыть
файл с помощью встроенной функции open()?
  В какой кодировке я должен конвертировать строку, чтобы открыть файл по записи?
  В какой кодировке имена файлов получаемые os.listdir()? [выделение моё]


Если параметры и результат имеют тип unicode (Python 2  или str на Python 3), то
слово кодировка неприменимо. Например, объект u"abc" в Питоне это неизменяемая последовательность
Unicode codepoints (U+0061, U+0062, U+0063). Как он в памяти представлен не имеет значения,
до тех пор пока эта абстракция не нарушена (что может произойти на так называемых narrow
Python 2 сборках, когда астральные символы такие как U+1F468 могут занимать больше
одного места—это недостаток реализации и всё равно не имеет отношения к кодировкам).

Имея текст, можно его закодировать в байты, используя самые разные кодировки:

>>> u'я'.encode('cp866')
b'\xef'
>>> u'я'.encode('cp1251')
b'\xff'
>>> u'я'.encode('utf-8')
b'\xd1\x8f'


Как видно из примера, разные кодировки могут один и тот же текст представлять используя
разные последовательности байтов. Сама строка u'я' (объект в памяти) не имеет никакой
кодировки (это просто последовательность состоящая из одного символа: U+044F в данном
случае).

Слово кодировка применимо, когда мы хотим преобразовать из текста в последовательность
байтов или наоборот из байтов в текст:

>>> b'\xef'.decode('cp866')
u'я'
>>> b'\xef'.decode('latin-1')
u'ï'


Видно что один и тот же байт может представлять разный текст в разных кодировках
(то есть сам по себе байт не имеет никакой кодировки).

На POSIX системе можно в качестве имени файла использовать любую последовательность
байтов (кроме нуля b'\x00' и слеша b'\x2f'), например, b'\x01\x02\x03', то есть может
не существовать осмысленного текста, соответствующего имени файла изначально. На практике,
если пользователи используют locale с разными кодировками или внешние диски с файловыми
системами, не хранящими используемую кодировку, то чтобы с этой кашей байтов безопасно
работать можно или передавать байты как есть или (как это Питон 3 делает) придумать
схему, которая позволяет декодировать в Unicode без потерь (surrogateescape обработчик
ошибок).

Формально, существует sys.getfilesystemencoding(), которая является кодировкой, используемой
Питоном, чтобы интерпретировать имена файлов, аргументы командной строки, переменные
окружения. Но (как показывают примеры выше) не всегда понятие кодировка может быть
использовано (и даже если имена являются осмысленным текстом в какой-то кодировке,
то не всегда эта кодировка совпадает с sys.getfilesystemencoding()—по разным причинам
на разных системах). К примеру, sys.getfilesystemencoding() всегда равна utf-8 на Python
3.6 на Windows (PEP 529), что отличается как от ANSI так и OEM code pages, т.к., для
фактического выполнения файловых операций используется системное Unicode API, которое
позволяет использовать символы непредставимые в этих кодировках. UTF-8 кодировка также
не имеет отношения к тому как Windows хранит имена файлов (UCS-2 или UTF-16).

Использование какой-то одной кодировки для представления имён файлов невозможно в
общем случае. Корректная работа с именами файлов не требует знания кодировок, используемых
разными частями системы.



Повторюсь: чтобы поддерживать самый общий случай, используйте Unicode на Питоне 3
на всех системах, возможно отслеживая lone surrogates на POSIX из-за surrogateescape,
если вы хотите имена файлов в других контекстах использовать (например, по сети послать).
Используйте Unicode API на Windows (на любой версии Питона). И для простоты передавайте
имена файлов  как есть (байты) на POSIX на Питоне 2. 

На Питоне 3, если вы передадите Unicode в os.walk(), os.listdir(), то и результат
всегда будет Unicode. На Питоне 2, это не всегда так. open(), etc принимают как Unicode
так и байты.




  Для удаления файла с помощью os.remove в какой кодировке должна быть строка (путь
к файлу) после прочтения этой строки из файла с UTF-8 кодировкой?


Если у вас файл содержит текст, закодированный с помощью UTF-8 кодировки, то вы можете
использовать io.open() (встроена на Питоне 3 как просто open()), чтобы прочитать его
содержимое как Unicode:

#!/usr/bin/env python2
import io
import sys

with io.open('files_to_remove.txt', encoding='utf-8') as file:
    for path in file:
        path = path.strip()
        try:
            os.remove(path)
        except OSError, e:
            print >>sys.stderr, "warning: can't remove %r, reason: %s" % (path, e)


Ответ 2

os.walk(), как и os.listdir(), даст на выходе данные в том же формате, что и входные
[0]. Самый надёжный и простой способ – всегда использовать юникод. Гарантировать это
можно, передавая в os.walk() путь в виде юникодовой строки:

# Python 2:
os.walk(u'.')

# Python 3:
os.walk('.')


Функция open() затем примет имена файлов для открытия без каких либо изменений, потому
что на данном этапе это будут юникодовые строки.

[0]: https://docs.python.org/3/howto/unicode.html#unicode-filenames

Почему идет ошибка like.addEventListener is not a function?

#javascript

Есть такой код и он работает: 

function openLikeBlock() {
  var like = document.getElementById("like");
  like.addEventListener('click', function (e) {
    e.preventDefault();
    if (!this.classList.contains('open'))
      this.classList.add('open');
    else
      this.classList.remove('open');
  });
}


Но если добавить ClassName то будет ошибка: 

var like = document.getElementsByClassName("like");



  Uncaught TypeError: like.addEventListener is not a function


Мне нужно именно класс, так как таких блоков несколько на странице (поэтому использую
this)

Вопрос: как сделать, что бы я мог получать элемент по классу, а не ID?
    

Ответы

Ответ 1

Потому что getElementsByClassName возвращает коллекцию элементов, а у коллекции нет
метода addEventListener

для решение можно просто пробежаться по возвращенной коллекции. например так:

[].forEach.call(like,function(el){
    el.addEventListener('click', function (e) {...})
});

C++ вывод “галочки” на экран

#cpp

Как вывести с помощью std::cout << ("") << std::endl; галочку на экран.
    

Ответы

Ответ 1

Например так:

cout <<  "\u2713" <
Ответ 2

Мой искренний совет: поскольку вывод на консоль зависит от массы факторов - широкие
символы используются или нет, кодировка и т.п. - не заморачивайтесь, а воспользуйтесь
чем-то похожим. Ну кой смысл в консоли эту красоту наводить? :)

Выведите какую-нибудь v, которая везде будет одинакова - ведь вряд ли вы ее с буквой
перепутаете.


Ответ 3

Галочка может быть представлена Unicode символом ✓(U+2713). В этом случае ваш вопрос
сводится: «как вывести Юникод на экран в c++», что может зависеть от платформы.

На Windows, чтобы произвольные символы выводить в консоль, не смотря на текущую codepage,
можно использовать WriteConsoleW() API или эквивалент (_O_U16TEXT режим и wprintf()
c wchar_t строками, см. Как отобразить русский текст?). Необходимо выставить шрифт
в консоли, который способен ✓ отображать. Ковыряние с locale или SetConsoleOutputCP()
не помогут с Unicode в общем случае.

На других системах, можно просто utf-8 выводить (предполагая, что терминал использует
utf-8), например в c++11:

cout << u8"\u2713";


Можно boost::nowide::cout использовать для переносимости: utf-8 строки автоматически
декодируются и используется WriteConsoleW() за кадром, если необходимо.

Как ускорить работу стека построенного на массиве размером 100М элементов?

#c_sharp #алгоритм #оптимизация #коллекции #быстродействие

Доброго всем времени суток!

Попалась тут задача, - сделать свой класс стека, с методами .pop(), .push(digit),
.inc(x, y)
С первыми двумя думаю понятно, а вот inc стоит объяснить, он берет первые x элементов
в массиве и прибавляет к ним число y (соответственно в результате мы должны получить
измененный стек). 

Нужно, чтобы запуская этот этот метод на стеке из 100000001 внутри цикла в 100000001,
это дело не зависало и отрабатывало максимально быстро (человек, который проверяет
эту работу, говорит, что можно сделать так, чтобы нижеуказанный тест проходил в пределах
нескольких секунд). Маньяки оптимизации, прийдите!!!

public void StackTest()
{
 var watch = new Stopwatch();
 var stack = new StackClass();

 var count = 100000001;

 watch.Start();
 for (int i = 0; i < count; i++)
 {
     stack.Push(i);
 }
 Console.WriteLine(watch.Elapsed);
 watch.Restart();

 for (int i = 0; i < count; i++)
 {
     stack.Inc(i, 2);
 }
 Console.WriteLine(watch.Elapsed);
 watch.Restart();

 for (int i = 0; i < count; i++)
 {
     stack.Pop();
 }
 Console.WriteLine(watch.Elapsed);
}


Я попробовал несколько реализаций, через List, Collection, Array. Самая быстрая получилась
через массив обычный. Вот такая:

class Stack
{
    private int[] arr = new int[100000001];
    private int _count;
    private int _currentIndex;
    public Stack()
    {
        _count = 0;
        _currentIndex = -1;
    }

    public void Push(int digit)
    {
        if (IsFull)
        {
            throw new Exception("Array is full");
        }
        _currentIndex++;
        arr[_currentIndex] = digit;
        _count++;
    }

    public int Pop()
    {
        int tmp = 0;
        if (IsEmpty)
        {
            throw new Exception("No elements in array");
        }
        tmp = arr[_currentIndex];
        arr[_currentIndex] = default(int);
        _count--;
        _currentIndex--;
        return tmp;
    }

    public void Inc(int count, int multiplier)
    {
        if (count > _count)
        {
            throw new Exception("Not enought element in array");
        }
        for (int i = 0; i < count; i++)
        {
            arr[i] += multiplier;
        }
        Console.WriteLine("Ready");
    }

    private bool IsEmpty {
      get{ return _count == 0; }
    }        
    private bool IsFull {
      get { return _currentIndex == arr.Length; }
    }
}
class Program
{
    static void Main(string[] args)
    {
        Console.WriteLine("Type exit and press enter to quit, type push 
to push digit in stack, pop - to see last stack element, inc  to
multiply first  elements on ");
        Stack stack = new Stack();
        while (true)
        {
            string[] input;
            string command = "";
            input = Console.ReadLine().Split(new char[] { ' ' });
            command = input[0];
            try
            {
                switch (command)
                {
                    case "push": { stack.Push(Convert.ToInt32(input[1])); break; }
                    case "pop": { Console.WriteLine(stack.Pop().ToString()); break; }
                    case "inc": { stack.Inc(Convert.ToInt32(input[1]), Convert.ToInt32(input[2]));
break; }
                }
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
            if (command == "exit") break;
        }
    }
}

    

Ответы

Ответ 1

Думаю, правильное решение примерно такое: для каждой позиции в имеющемся массиве
храним значение инкремента, действующее на неё и левее (но не правее). В pop будем
пересчитывать инкремент для текущего элемента. Для этого будем накапливать правые инкременты
в inc, и суммировать накопленное значение с оригинальным в массиве.

http://ideone.com/b3T3ci

public class StackClass
{
    private int[] data = new int[100000001];
    private int[] add = new int[100000001];
    private int inc = 0;
    private int i = -1;

    public void Push(int x)
    {
        if (i >= 0) add[i] += inc;
        inc = 0;
        data[++i] = x;
    }

    public int Pop()
    {
        inc += add[i];
        add[i] = 0;
        return data[i--] + inc;
    }

    public void Inc(int r, int delta)
    {
        if (r <= i)
            add[r] += delta;
        else
            inc += delta;
    }
}



  Успешно   #stdin #stdout 1.38s 29672KB


00:00:00.5797480
00:00:00.3059362
00:00:00.4621549


Думаю, можно даже нормально List применить:

http://ideone.com/QTmDnz

public class StackClass
{
    private List data = new List(100000001);
    private List add = new List(100000001);
    private int inc = 0;

    public void Push(int x)
    {
        data.Add(x);
        if (add.Count > 0) add[add.Count-1] += inc;
        add.Add(0);
        inc = 0;
    }

    public int Pop()
    {
        int i = data.Count - 1;
        int res = data[i] + (inc += add[i]);

        add.RemoveAt(i);
        data.RemoveAt(i);

        return res;
    }

    public void Inc(int r, int delta)
    {
        if (r < add.Count)
            add[r] += delta;
        else
            inc += delta;
    }
}


Секунд в 6 должна уложиться, но ideone хочет 5:


  Превышено ограничение на время    #stdin #stdout 5s 29800KB


00:00:02.2248518
00:00:01.1903442
00:00:02.0052423


Более ранняя версия с багами:
http://ideone.com/16JZ5V


  Успешно   time: 4.67 memory: 29808 signal:0


00:00:01.3654668
00:00:01.1821722
00:00:02.0888570


Ответ 2

Для решения задачи прибавления на сегменте массива используются специальные структуры
данных, или подходы, например:


sqrt-декомпозиция, сложность O(sqrt(n))
дерево отрезков, O(ln(n))
Дерево Фенвика, O(ln(n))


Как реализовать их, можно прочитать, например, здесь http://e-maxx.ru/algo/sqrt_decomposition


Ответ 3

В методе Pop можно не обнулять значение массива и не использовать лишнюю переменную.
Это избыточно. Как 
Единственная идея, которая приходит на ум - не производить сложения, а записывать
интервалы, которые требуется изменить. И при попытке обращения к элементу, проходить
все эти запросы и выдавать вычисленный элемент. Следует не забыть, что при извлечении
элементов потребуется так же править интервалы - вы не должны в итоге прибавить число
к элементу, которого не было на момент запроса

C#: в чем разница между readonly и const?

#c_sharp #const #readonly

Привет всем!
В C# есть const и readonly.
В сети нашел только информацию о разнице static readonly и const. А какая разница
между просто readonly и const?
    

Ответы

Ответ 1

Значения полей с модификатором const при компиляции подставляются в тех местах кода,
где к ним происходит обращение. Это значит, что в случае, когда такое поле объявлено
в классе одной сборки, а используется классами другой сборки, для того чтобы измененное
значение было применено в зависимой сборке, потребуется перекомпиляция зависимой сборки.
 Задать значение можно только в момент объявления. В общем то const-поля это не совсем
поля.

Поля с модификатором readonly являются полноценными полями, с той разницей, что изменять
их значение разрешено только в конструкторе. Соответственно static readonly - в статическом
конструкторе (код инициализации полей при объявлении переносится в конструктор компилятором).
Таким образом, значения readonly-полей могут, например вычисляться на основе параметров
переданных в конструктор, что невозможно для const-полей.

В большинстве случаев рекомендуется использовать именно readonly-поля вместо const-полей
когда ваш проект включает более одного модуля.

А еще у нас тут есть шикарный список литературы рекомендуемой к прочтению для изучения
C# и .NET. Книги в списке условно разделены по уровню сложности. Большую часть из них
можно найти в сети в электронном виде, было бы желание. Так уж получается, что без
чтения книжек программисту не обойтись.

Как сделать градиентную резиновую кнопку с косым краем (в виде трапеции) и закругленными углами?

#html #css #css3

Вот пример на картинке, как можно это реализовать? Желательно на чистом css?


    

Ответы

Ответ 1

UPD. Вот кнопка с градиентом, скошенным краем и закруглёнными углами. Растягивается
под содержимое.



Делал на основе стрелки с градиентом. Чтобы получить скошенную сторону, спрятал за кнопку
псевдоэлемент и трансформировал его с помощью skewX. Чтобы кнопка растягивалась, переместил
точку трансформации в угол, растянул псевдоэлемент между верхним и нижним краями родителя
и задал ему ширину как у родителя.

https://codepen.io/glebkema/pen/eRPgMP



.btn-skew,
.btn-skew:before {
  border: 1px solid #4d7a9c; 
  box-sizing: border-box;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;

  background: #238fe7; /* Old browsers */
  background: -moz-linear-gradient(top,  #238fe7 0%, #156fba 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #238fe7 0%,#156fba 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #238fe7 0%,#156fba 100%); /* W3C, IE10+,
FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#238fe7', endColorstr='#156fba',GradientType=0
); /* IE6-9 */ 
}

.btn-skew {
  border-left: none;
  color: white;
  font-size: 18px;
  margin-left: 20px;
  padding: 10px 14px 11px 10px;
  position: relative;
}

.btn-skew:before {
  content: '';
  display: block;
  position: absolute; top: -1px; right: 0; bottom: -1px;
  width: 100%;
  z-index: -1;
 
  -webkit-transform: skewX(-15deg);
     -moz-transform: skewX(-15deg);
      -ms-transform: skewX(-15deg);
       -o-transform: skewX(-15deg);
          transform: skewX(-15deg);
  -webkit-transform-origin: 0 0;
     -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
       -o-transform-origin: 0 0;
          transform-origin: 0 0;
}




Ответ 2

Реализация на основе свойства transform



.element {
  display:inline-block;
  position:relative;
  width:100px; height:40px;
  background-color:blue;
  border-radius:5px 5px 5px 0;
  padding-left:15px;
}
.element::before {
  position:absolute;
  top:0; bottom:0; left:-7.5px;
  width:15px;
  background-color:blue;
  border-radius:5px 0 0 7.5px;
  content:'';
  transform:skewX(-15deg);
}
body {
  margin:100px;
}