css-shapes

问题 Well, I'm trying to create an SVG section separator. It worked like this: <section id="section1"> </section> <svg width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none"> <path d="M0 0 L50 100 L100 0 Z" /> </svg> <section id="section2"> </section> So far, so good. But now, I want to add a background to section1, including the SVG "pick", in example: All I've accomplished is (really bad results): Adding a background: url(img) to the element And: Justing adding a BG to

问题 Well, I'm trying to create an SVG section separator. It worked like this: <section id="section1"> </section> <svg width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none"> <path d="M0 0 L50 100 L100 0 Z" /> </svg> <section id="section2"> </section> So far, so good. But now, I want to add a background to section1, including the SVG "pick", in example: All I've accomplished is (really bad results): Adding a background: url(img) to the element And: Justing adding a BG to

问题 I am trying to skew a background image on one side that has a border. The layout I am basically trying to create is as follows: Here is a quick JSFiddle I made with the current setup: https://jsfiddle.net/silvawebdesigns/b2ae0k69/11/ #about-gallery { margin: 60px 0; display: -ms-flex; display: -webkit-flex; display: flex; flex-wrap: wrap; margin-bottom: 500px; width: 100%; } .about-img-wrapper { position: relative; width: 100%; display: -ms-flex; display: -webkit-flex; display: flex; flex

问题 I'm trying to insert a curve in the middle of a div, so i can achieve this result: This is what i did so far. .back{ background-color: grey; width: 100%; height: 200px; display: inline-grid; align-items: center; overflow: hidden; } .line{ height: 3px; background: linear-gradient(to right, yellow, purple, blue, green, red, orange); transform: rotate(-10deg); } <div class="back"> <div class="line"></div> </div> 回答1: Without gradient and with transparency you can consider pseudo element and

问题 Problem My navbar looks like this: HTML and CSS nav { width: 1040px; } nav ul { display: block; list-style-type: none; height: 40px; border-top: 3px solid #222; } nav ul li { width: 130px; display: inline-block; line-height: 40px; text-align: center; font-size: 16px; font-family: Vollkorn; font-weight: 400; } nav ul li a { display: block; text-decoration: none; color: #333; } nav ul li a:hover, nav ul li a:focus { color: #000; box-shadow: 0px 0px 2px black; border-radius: 10px; border: 2px

问题 I'm trying to create following shape. Almost I tried to create this image by following way. In order create this Image using HTML and CSS. I tried to use following code. .left1{ float:left; transform: rotate(180deg); } .halfCircleRight1{ height: 70px; width: 70px; border-top-right-radius: 10em; border-bottom-right-radius: 10em; background: #326d7d; } .halfCoverTop1 { height: 35px; width: 35px; border-bottom-right-radius: 10em; background: #ffffff; } .halfCoverBottom1{ height: 35px; width:

问题 I want to make only one rounded corner for a triangle but I'm unable to make it. Here is my code: .arrow-left { width: 0; height: 0; border-top: 80px solid transparent; border-bottom: 80px solid transparent; border-right: 80px solid blue; } <div class="arrow-left"></div> I need the corner pointing left to be rounded as shown in this image : 回答1: I know this is a little hacky, but I don't think there is an easy way to do this with a single class. All I've done is rotated a box 45 degrees with

问题 I want to make only one rounded corner for a triangle but I'm unable to make it. Here is my code: .arrow-left { width: 0; height: 0; border-top: 80px solid transparent; border-bottom: 80px solid transparent; border-right: 80px solid blue; } <div class="arrow-left"></div> I need the corner pointing left to be rounded as shown in this image : 回答1: I know this is a little hacky, but I don't think there is an easy way to do this with a single class. All I've done is rotated a box 45 degrees with

问题 This question already has answers here : CSS: Make border on pure-CSS arrow (5 answers) Closed 4 years ago . I have four div styles that I need to use: one with no arrows, a right arrow, a left arrow, and both right and left arrows. I want the arrowed divs to have a border surrounding them that matches the div with no arrows. These divs need to be the same exact height and width and the borders need to all match. You'll notice in my code I DO specify a border for the arrowed divs and it's the

问题 I tried a lot but still struggling with making this trapezoid shape with pure css. The shape that I am trying to achieve is the white coloured portion in the given image containing the text (London,UK). The shape is like a cathode ray tube or a baseball bat. 回答1: Trapezoid shape with rounded edges You can make that shape with CSS3 properties : skewY() and border-radius . This technique needs 2 elements to create the CSSS-shape, one for the trapezoid and one for the rounded corners. Both