Sass

How to cut box corner Using CSS with transparent background?

╄→尐↘猪︶ㄣ 提交于 2020-08-22 12:06:29
问题 I want to cut left top corner of a box using CSS like this. keep in mind that background is transparent. 回答1: Nearly the same solution as OriDrori's answer but more flexible (if you need fixed-width cutted corner). This gradient will look the same regardless of .card width and height . body { background: purple; } .card { width: 200px; height: 200px; background: linear-gradient(135deg, transparent 20px, white 20px); } <div class="card"></div> 回答2: You can use a simple linear gradient for that

How to cut box corner Using CSS with transparent background?

本小妞迷上赌 提交于 2020-08-22 12:06:23
问题 I want to cut left top corner of a box using CSS like this. keep in mind that background is transparent. 回答1: Nearly the same solution as OriDrori's answer but more flexible (if you need fixed-width cutted corner). This gradient will look the same regardless of .card width and height . body { background: purple; } .card { width: 200px; height: 200px; background: linear-gradient(135deg, transparent 20px, white 20px); } <div class="card"></div> 回答2: You can use a simple linear gradient for that

Partial vertical borders on form input

ぐ巨炮叔叔 提交于 2020-08-20 07:15:12
问题 GOAL: I am trying to create partial vertical borders on a form input. The desired effect is the following: PROBLEM: Pseudo before and after elements are not permitted for inputs so this is not an option. Alternatively, using height to limit the size of the input with border left and right cuts off the text. LIMITS: No extra HTML elements or images can be used, this has to work using just CSS. POSSIBLE SOLUTIONS: I tried to create a gradient border with limited steps but was unable to