คำถามติดแท็ก css-shapes

ตั้งค่าใหม่แล้วStack Overflow ที่แยกออกมาจากส่วนที่เหลือ : ตั้งค่าไว้ CSS? มี CSS รูปร่างที่แตกต่างกันมากมายที่CSS Tricks - รูปร่างของ CSSและฉันงงกับสามเหลี่ยมเป็นพิเศษ: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div id="triangle-up"></div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล มันทำงานอย่างไรและทำไม?

1846 css  geometry  polygon  css-shapes 

ฉันจะสร้างเมนูที่มีลักษณะเช่นนี้ได้อย่างไร ... ลิงก์ไปยัง PSD ฉันไม่ต้องการใช้รูป PSD ฉันต้องการใช้ไอคอนจากบางแพคเกจเช่นFontAwesomeและสร้างพื้นหลัง / CSS ใน CSS รุ่นของเมนูที่ใช้ PSD เพื่อการสร้างภาพของคำแนะนำเครื่องมือแล้วใช้ก็สามารถพบได้ที่นี่

321 css  tooltip  css-shapes 

ฉันต้องการล้อมรอบตัวเลขในวงกลมเช่นในภาพนี้: เป็นไปได้หรือไม่และเป็นไปได้อย่างไร

250 html  css  css-shapes 

ฉันต้องการมีหน้าเว็บที่มีคำที่กึ่งกลางหนึ่งคำ ฉันต้องการให้คำนี้วาดด้วยอนิเมชั่นเช่นที่หน้า "เขียน" คำนั้นในลักษณะเดียวกับที่เราต้องการคือมันเริ่มต้นที่จุดหนึ่งแล้วลากเส้นและเส้นโค้งเมื่อเวลาผ่านไปซึ่งผลลัพธ์สุดท้ายคือ glyph ฉันไม่สนใจว่าสิ่งนี้จะทำด้วย<canvas>หรือ DOM และฉันไม่สนใจว่ามันจะทำกับ JavaScript หรือ CSS การขาดงานของ jQuery จะดี แต่ไม่จำเป็น ฉันจะทำสิ่งนี้ได้อย่างไร ฉันค้นหาอย่างละเอียดโดยไม่มีโชค

229 javascript  css  canvas  html5-canvas  css-shapes 

ฉันจะสร้างรูปร่างเช่นนี้เพื่อแสดงบนหน้าเว็บได้อย่างไร ฉันไม่ต้องการใช้ภาพเพราะพวกเขาจะพร่ามัวเมื่อปรับขนาด ฉันลองใช้CSS : .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } <div class="tear"> </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล ที่กลายเป็นเมาจริงๆ จากนั้นฉันก็ลองใช้ SVG: <svg viewBox="0 100 100"> <polygon points="50,0 100,70 50,100 0,70"/> </svg> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายตัวอย่างข้อมูล มันมีรูปร่าง แต่ส่วนล่างไม่โค้ง มีวิธีสร้างรูปร่างนี้เพื่อให้สามารถใช้ในหน้า HTML ได้หรือไม่

222 html  css  svg  css-shapes 

นี่คือ CSS: div { width: 0; height: 0; border: 180px solid red; border-radius: 180px; } มันสร้างวงกลมด้านล่างได้อย่างไร สมมติว่าถ้าความกว้างของรูปสี่เหลี่ยมผืนผ้าเท่ากับ 180 พิกเซลและความสูงเป็น 180 พิกเซลก็จะปรากฏดังนี้: หลังจากใช้รัศมีเส้นขอบ 30 พิกเซลมันจะปรากฏดังนี้: สี่เหลี่ยมเล็กลงนั่นคือเกือบจะหายไปถ้าขนาดรัศมีเพิ่มขึ้น ดังนั้นเส้นขอบของพิกเซลที่ 180 ด้วยheight/width-> 0pxกลายเป็นวงกลมที่มีรัศมี 180 พิกเซลได้อย่างไร

206 html  css  css-shapes 

ฉันสงสัยว่าถ้ามีวิธีสร้าง divs แบบวงกลมง่ายกว่าที่ฉันทำอยู่ตอนนี้ ขณะนี้ฉันกำลังสร้างภาพสำหรับแต่ละขนาดแตกต่างกัน แต่มันน่ารำคาญที่จะทำเช่นนี้ อย่างไรก็ตามมีการใช้ CSS เพื่อทำให้ div ซึ่งเป็นวงกลมและฉันสามารถระบุรัศมีได้หรือไม่

183 html  css  geometry  css-shapes 

ฉันพบตัวอย่างนี้ใน stackoverflow: วาดวงกลมโดยใช้ CSS เพียงอย่างเดียว อันไหนดี แต่ฉันต้องการทราบวิธีแก้ไขตัวอย่างนั้นเพื่อให้ฉันสามารถรวมข้อความไว้ตรงกลางของวงกลมได้ ฉันยังพบสิ่งนี้: ข้อความตรงกลางและแนวนอนในวงกลมใน CSS (เช่นป้ายแจ้งเตือน iphone) แต่ด้วยเหตุผลบางอย่างมันไม่ทำงานสำหรับฉัน เมื่อฉันสร้างรหัสทดสอบต่อไปนี้: <div class="badge">1</div> แทนที่จะเป็นวงกลมฉันได้รูปวงรี ฉันพยายามที่จะเล่นกับรหัสเพื่อดูว่าฉันสามารถทำงานได้

156 css  css-shapes 

ถ้าฉันใช้ค่าพิกเซลหรือ emสำหรับ border-radius รัศมีขอบจะเป็นส่วนโค้งวงกลมหรือรูปเม็ดยาเสมอแม้ว่าค่าจะมากกว่าด้านที่ใหญ่ที่สุดขององค์ประกอบก็ตาม เมื่อฉันใช้เปอร์เซ็นต์รัศมีขอบจะเป็นรูปไข่และเริ่มต้นที่ตรงกลางของแต่ละด้านขององค์ประกอบทำให้เป็นรูปวงรีหรือวงรี : ค่าพิกเซลสำหรับรัศมีขอบ: แสดงข้อมูลโค้ด div { background: teal; border-radius: 999px; width: 230px; height: 100px; padding: 40px 10px; box-sizing: border-box; font-family: courier; color: #fff; } <div>border-radius:999px;</div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด ค่าเปอร์เซ็นต์สำหรับรัศมีขอบ: แสดงข้อมูลโค้ด div { background: teal; border-radius: 50%; width: 230px; height: 100px; padding:40px 10px; box-sizing:border-box; font-family:courier; color:#fff; } <div>border-radius:50%;</div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด …

125 css  css-shapes 

เป็นไปได้ไหมที่จะควบคุมความยาวและระยะห่างระหว่างเส้นขอบเส้นประใน CSS ตัวอย่างด้านล่างนี้แสดงแตกต่างกันระหว่างเบราว์เซอร์: div { border: dashed 4px #000; padding: 20px; display: inline-block; } <div>I have a dashed border!</div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด ความแตกต่างใหญ่: IE 11 / Firefox / Chrome มีวิธีการใดบ้างที่สามารถควบคุมลักษณะของเส้นขอบประ

124 css  border  css-shapes 

คุณวาดวงกลมโดยใช้ HTML5 และ CSS3 ได้อย่างไร? สามารถใส่ข้อความข้างในได้หรือไม่?

118 html  css  geometry  css-shapes 

กำลังพยายามใช้สีฐานสิบหกที่กำหนดเองสำหรับสามเหลี่ยม css ของฉัน (เส้นขอบ) อย่างไรก็ตามเนื่องจากมันใช้คุณสมบัติเส้นขอบฉันจึงไม่แน่ใจว่าจะทำอย่างไร ฉันต้องการหลีกเลี่ยง javascript และ css3 เพียงเพราะความเข้ากันได้ ฉันพยายามให้สามเหลี่ยมมีพื้นหลังสีขาวที่มีเส้นขอบ 1px (รอบ ๆ ด้านที่ทำมุมของสามเหลี่ยม) ด้วยสี # CAD5E0 เป็นไปได้หรือไม่ นี่คือสิ่งที่ฉันมีจนถึงตอนนี้: .container { margin-left: 15px; width: 200px; background: #FFFFFF; border: 1px solid #CAD5E0; padding: 4px; position: relative; min-height: 200px; } .container:after { content: ''; display: block; position: absolute; top: 10px; left: …

114 css  border  css-shapes 

ปิด. คำถามนี้ไม่เป็นไปตามหลักเกณฑ์กองมากเกิน ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน5 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันได้ค้นหาเว็บไซต์นี้เพื่อค้นหาแถบความคืบหน้า แต่สิ่งที่ฉันสามารถพบได้แสดงวงกลมที่เคลื่อนไหวได้เต็ม 100% ฉันต้องการให้หยุดที่เปอร์เซ็นต์บางอย่างเช่นในภาพหน้าจอด้านล่าง มีวิธีใดบ้างที่ฉันสามารถทำได้โดยใช้ CSS เพียงอย่างเดียว

112 html  css  progress-bar  progress  css-shapes 

โอเคทุกคนรู้ว่าคุณสร้างสามเหลี่ยมได้โดยใช้สิ่งนี้: #triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } และนั่นทำให้เกิดของแข็งที่เต็มไปด้วยสามเหลี่ยม แต่คุณจะสร้างสามเหลี่ยมคล้ายลูกศรกลวงแบบนี้ได้อย่างไร?

102 html  css  css-shapes 

ฉันกำลังพยายามสร้างรูปร่างเหมือนในภาพด้านล่างโดยมีขอบเอียงเพียงด้านเดียว (เช่นด้านล่าง) ในขณะที่ขอบอีกด้านยังคงตรง ฉันลองใช้วิธีการเส้นขอบ (ระบุรหัสด้านล่าง) แต่ขนาดของรูปร่างของฉันเป็นแบบไดนามิกดังนั้นฉันจึงไม่สามารถใช้วิธีนี้ได้ .shape { position: relative; height: 100px; width: 200px; background: tomato; } .shape:after { position: absolute; content: ''; height: 0px; width: 0px; left: 0px; bottom: -100px; border-width: 50px 100px; border-style: solid; border-color: tomato tomato transparent transparent; } <div class="shape"> Some content </div> เรียกใช้ข้อมูลโค้ดซ่อนผลลัพธ์ขยายข้อมูลโค้ด ฉันได้ลองใช้การไล่ระดับสีสำหรับพื้นหลังด้วย (เช่นในโค้ดด้านล่าง) …

93 html  css  responsive-design  css-shapes