css-shapes

问题 How can I cut the full corner off a div, keeping it transparent. This is what I've tried: .well-corner { min-height: 20px; padding: 19px; margin-bottom: 20px; background: rgba(8, 12, 23, 0.8); -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); border-top-right-radius: 50px; } .well-link { float: right; } .diagonal { float: left; width: 50px; transform: skewX(-10deg); } <div class="well-corner clearfix"> <div class="diagonal"> </div> <a

问题 Please help me change the cutout from .top so that it is on top and not on the right. As shown in the image. Thank you very much in advance. I really hope for your help, I'm new to this business. Source code: Source code .box { margin-top:120px; width:200px; height:100px; background:white; } .box .top { height:100px; width:150px; transform:translateY(-100%); position:relative; background:#fff; } .top:before, .top:after{ content:""; position:absolute; top:0; width:50px; left:100%; bottom:50%;

问题 I saw this question and answer: CSS Gradient arrow shape with inner shadow and gradient border and I'm looking to create the same thing but with an arrow on each side. Here is what the final result would looks like: 回答1: I would do it in 3 steps: create a normal rectangular element with a background gradient (e.g. from orange to red) create a pseudo element ::before with a background color, the gradient is starting with (e.g. orange) create a pseudo element ::after with a background color,

问题 I'm trying to create a pyramid. I figured I'd use the CSS clip-path for that. I meant to do a triangle (which I managed to do) and several trapezoids beneath it (even the first one failed). .container { min-width: 50%; max-width: 50%; } .triangle { background-color: yellow; clip-path: polygon(90% 100%, 50% 0%, 10% 100%); } .trapeze { background-color: blue; clip-path: polygon(0% 10%, 0% 90%, 0% 100%, 100% 100%); } div { min-height: 200px; max-height: 200px; border-color: black; border-style:

问题 So I'm trying to create a cloud using divs and CSS mainly. I have few divs shaped as circles or blobs and the idea is to merge them into one so that they look like a cloud. .cloud-body{ width:250px; height:200px; background: linear-gradient(blue,blueviolet); margin-left: 30%; margin-top:20%; border-radius:50%; } .blob1{ width: 100px; height: 100px; background: blue; border-radius:50%; position:relative; bottom: 200px; left: 60%; } .blob2{ width: 200px; height: 150px; background: linear

问题 So I'm trying to create a cloud using divs and CSS mainly. I have few divs shaped as circles or blobs and the idea is to merge them into one so that they look like a cloud. .cloud-body{ width:250px; height:200px; background: linear-gradient(blue,blueviolet); margin-left: 30%; margin-top:20%; border-radius:50%; } .blob1{ width: 100px; height: 100px; background: blue; border-radius:50%; position:relative; bottom: 200px; left: 60%; } .blob2{ width: 200px; height: 150px; background: linear

问题 I'm trying to recreate the following image in CSS: I've already started making the box and arrow (see below) and now my only problem is to make the left edge of the arrow round with CSS only just like in the image. Any idea? Thanks. .speech-bubble { position: relative; background: #ff0d1e; display: inline-block; width: 239px; height: 95px; margin: 40px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .speech-bubble:after { content: ""; position: absolute; top:

问题 I'm trying to recreate the following image in CSS: I've already started making the box and arrow (see below) and now my only problem is to make the left edge of the arrow round with CSS only just like in the image. Any idea? Thanks. .speech-bubble { position: relative; background: #ff0d1e; display: inline-block; width: 239px; height: 95px; margin: 40px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .speech-bubble:after { content: ""; position: absolute; top:

问题 I want something like this (the pink circle): CSS quarter circle 100vh example. So far, I have a half-circle (see CSS below), but when I try to make it 100vh, it stretches and I can't figure out how to keep it proportional. .circle { height: 180px; width: 90px; border-radius: 0 90px 90px 0; -moz-border-radius: 0 90px 90px 0; -webkit-border-radius: 0 90px 90px 0; background: red; margin: 100px; position: absolute;} Any insights greatly appreciated. Thanks 回答1: I modified the code to only use

问题 I want something like this (the pink circle): CSS quarter circle 100vh example. So far, I have a half-circle (see CSS below), but when I try to make it 100vh, it stretches and I can't figure out how to keep it proportional. .circle { height: 180px; width: 90px; border-radius: 0 90px 90px 0; -moz-border-radius: 0 90px 90px 0; -webkit-border-radius: 0 90px 90px 0; background: red; margin: 100px; position: absolute;} Any insights greatly appreciated. Thanks 回答1: I modified the code to only use