AlexZaw

Пока отвлекался уже ответов надавали ?

.tabs-slider__title:after{ content: ''; display: inline-block; height: 100%; vertical-align: middle; } .tabs-slider__title { border: 1px solid #000; display: inline-block; width: 100%; height: 36px; margin-bottom: 16px; overflow: hidden; span { display: inline-block; vertical-align: middle; line-height: 18px; } }

Вобщем написал плагинчик который это делает. Т.е. если человек выкладывает в теме свой код который оформлен соответствующим образом (с помощью кнопочки "Код" в верхней панели) т.е. вот так Плагин автоматом добавляет сверху кнопку которая, при нажатии, выделяет весь код чтобы его можно было скопировать в буфер обмена. Плагин сделан для того, что-бы не копировать длинные куски кода в ручную, так как это не всегда удобно. Поддержка браузеров Chrome, Opera, Firefox, Edge. На остальных не тестировался за неимением таковых. Скачать плагин можно по адресу https://github.com/AlexZaw/SelectCode Надеюсь кому-нибудь пригодится.

Можно обрезать с помощью clip-path, можно сделать дополнительные блоки сверху и снизу, можно сделать обертку и наклонить ее с помощью skewY, а содержимое наклонить в обратную сторону

К сожалению нет, но вам поможет clip-path или mask http://htmlbook.ru/blog/maskirovanie-v-css http://htmlbook.ru/blog/maskirovanie-v-css

.tabs-slider__title { display: inline-block; } А таблица растягивает ваш элемент по высоте

Можно сделать двумя линиями каждую под своим наклоном и спозиционировав их, а можно и квадратом сделать, просто наклонить его с помощью skew

Можно так: <div></div> div{ margin: 50px; height: 100px; width: 150px; background: #333; border-radius: 20px; position: relative; } div:after, div:before{ content: ''; display: block; position: absolute; height: 100px; width: 150px; border-radius: 20px; background: #333; } div:after{ transform: rotate(60deg); } div:before{ transform: rotate(-60deg); }

Держите ссылочки, это конечно не совсем то что вы просили, но какое то представление даст: https://habr.com/post/220681/ https://blog.sibirix.ru/2018/04/17/perfect-psd/

Да везде говорится что верстка pixel perfect это максимальное приближение к макету. Если вы хотите найти какие-то стандарты где расписано что это делается вот так, а это вот так, то такого просто не существует. Все руководствуются здравым смыслом и возможностями самих браузеров. Тут либо пробовать объяснить заказчику что это выглядит криво и не симметрично, и такая верстка займет больше времени и будет больше занимать объема, а следовательно медленнее грузится сайт, что скажется на его рейтинге (а это уже весомый аргумент ? ), либо, если заказчик упертый, смириться. Если заказчик человек адекватный он поймет что вся эта кривизна в дизайне не от большого ума дизайнера, а как раз наоборот ?

Она у вас и так справа от текста встает, стоит только путь правильный указать

Если разница в отступах не заметна на глаз или не сильно заметно, то пинайте за это дизайнера, если дизайнер левый или нет возможности связаться с ним - попробуйте поговорить с заказчиком и объяснить ему что это увеличивает время верстки, размер кода. Если разница заметна на глаз то, опять же укажите на это заказчику, возможно он этого не видел. Если же заказчика все устраивает то попробуйте выбить из него побольше денег ссылаясь на то что одинаковые блоки и должны выглядеть одинаково, а pixel perfect подразумевает собой общее расположение блоков, а не небрежность/криворукость дизайнера при дизайне отдельных элементов ? Если заказчик далек от темы веба то такой вариант может прокатить ? Вообще, на мой взгляд, это не совсем правильно, если конечно это не фишка дизайна которая согласована, а именно небрежность которая не придает дизайну шарма а режет глаз. Да, и еще, для Pixel Perfect макет должен быть подготовлен идеально (каждый отступ и размер шрифта логически обоснован) Вот это тоже стоит объяснить заказчику, если будут расхождения в верстке из-за шрифтов

Значит все элементы на странице у вас должны располагаться точно так же как и в макете. С точностью до пикселя. Если есть отступ на макете в 17 пикселей, он и должен быть 17px, не 15, не 20, а именно 17. Если элемент, по логике, должен стоять по ценртру, а на макете он немного смещен, то и нужно делать его с таким же смещением. Есть мнение что большинство заказчиков сами не знают что это такое, но слышали что это круто.

Так оно ж не квадратное.

https://caniuse.com/#search=vw

display забыли задать. ну и background-color вместо color

Задайте высоту и ширину в vw.

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

С помощью псевдоэлементов можно. Либо с помощью svg

<p><img src="http://placekitten.com/g/300" alt="Фотография" onMouseOver='toolTip("это \"Котэ\", звать его \"Мурзик\"")' onMouseOut="toolTip()"></p> Остальной код тот же самый что и в вашей ссылке.

Пропишите для них width:100%;

Он переодически отваливается, ничего страшного скоро вернется в строй. А пока пользуйтесь htmlbook ?

line-height это не высота строки, а расстояние между базовыми линиями соседних строк. У текста есть запас на всякие там умлауты и иже с ними, у инлайн блоков запаса нет

Размеры сами подставите <div class="container"> <div class="column header"></div> <div class="row"> <div class="column column1">1</div> <div class="wrap"> <div class="column column2">2</div> <div class="column column3">3</div> <div class="column column4">4</div> </div> </div> <div class="column footer"></div> </div> .container { width: 600px; min-height: 230; } .column { height: 90px; padding: 20px; border: 1px solid black; box-sizing: border-box; } .column2{ width: 100%; } .column3, .column4{ width: 50%; } .row { display: flex; justify-content: space-between; } .wrap{ display: flex; flex-wrap:wrap; } .header { padding: 20px; height: 40px; margin-bottom: 5px; } .footer { padding: 5px; height: 20px; margin-top: 5px; }

Придется разнести условия как то так: for (var i = 0; i < cart.lifeTimeStats.length; i++){ for (var k in cart.lifeTimeStats[i]){ if(cart.lifeTimeStats[i][k] == "Matches Played"){ message.reply("Матчей сыграно: " + cart.lifeTimeStats[i].value) }else if (cart.lifeTimeStats[i][k] == "Win%"){ message.reply("Процент побед: " + cart.lifeTimeStats[i].value) }else if(cart.lifeTimeStats[i][k] == "K/d"){ message.reply("Убийств/смертей: " + cart.lifeTimeStats[i].value) } } }