Css3 көмегімен трапеция/трапецияны қалай салу керек?

Мобильді Safari бағдарламасын пайдаланып http://m.google.com бетіне шыққанда, әдемі жолақты көресіз беттің жоғарғы жағында.

Мен осындай трапецияларды (АҚШ: trapezoids) сол жақта салуды қалаймын, бірақ мен қалай білмеймін. Css3 3d түрлендіруін пайдалану керек пе? Егер сізге жетудің жақсы әдісі болса, онда айтшы.

23
Мүмкін, менде бірдеңе болмады, бірақ дененің тегіне қолданылатын градиентсіз сурет емес пе? Егер сіз css3 градиенттерін қолдансаңыз ... Мен «трапеция» дегенді білмеймін.
қосылды автор chovy, көзі
Навигациялық жолды білдіреді ме? Бұл сурет: google.com/mobile/ images/mgc3/mgc-body-toolbar-bg-banner.png
қосылды автор Blender, көзі
АҚШ-та біз параллель жақтары бар бір жақты төртбұрышты «трапеция» және төртбұрышты параллель жақтары жоқ «трапеция» деп айтамыз. АҚШ-тан тыс жерде, «трапеция» = US :: «трапеция» және АҚШ-та: «трапеция» - жай ғана «дұрыс емес». Білу - шайқастың жартысы
қосылды автор Andrew Kozak, көзі

3 жауаптар

Сіз мына CSS сияқты пайдалана аласыз:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}
<div id="trapezoid"></div>
</div> </div>

Барлық осы пішіндерді жасау өте керемет, Жақсы пішіндерді қараңыз:

http://css-tricks.com/examples/ShapesOfCSS/

EDIT: Бұл CSS DIV элементіне қолданылады

38
қосылды
үлкен рахмет! Мен осы сайтты бұрын көрген едім, бірақ кеше оны ұмытып кеттім! Мен мәселені шешдім. Рахмет!
қосылды автор CashLee李秉骏, көзі
@Kishan: жауапты трапеция үшін бұл жауапты тексеріңіз stackoverflow.com/a/26628030/933633
қосылды автор TheCarver, көзі
сэр, жауапты trapziod пішінін алғым келеді. Сіз бұл туралы маған бірдеңе айта аласыз ба?
қосылды автор Kishan, көзі
Сізді қуантып отырсаңыз, бұл менің сүйікті сайттарымның бірі, сізде көптеген пайдалы ақпарат таба аласыз.
қосылды автор ElHacker, көзі

Қазір бұл өте ескіргендіктен, кейбір жаңа технологиялармен жаңартылған кейбір жауаптармен пайдалануға болатындығын сезінемін.

CSS Transform Perspective

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

.trapezoid {
  width: 200px;
  height: 200px;
  background: red;
  transform: perspective(10px) rotateX(1deg);
  margin: 50px;
}
<div class="trapezoid"></div>
</div> </div>

SVG

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

 
 
</div> </div>

Кенепте

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

var c = document.getElementById("myКенепте");
var ctx = c.getContext("2d");
ctx.moveTo(30, 0);
ctx.lineTo(170, 0);
ctx.lineTo(200, 200);
ctx.lineTo(0, 200);
ctx.fillStyle = "#FF0000";
ctx.fill();
<�����������������������������
���</div>
26
қосылды

Сізге бірнеше опция бар. Сіз жай ғана суретті қолданып, svg көмегімен бір нәрсені суреттей аласыз немесе CSS өзгерістері бар тұрақты дивиздерді бұрмаламаңыз. Кескін оңай болады және барлық браузерлерде жұмыс істейтін болады. СВГ-да сызу - бұл күрделірек және басқармада жұмыс істеуге кепілдік берілмейді.

Екінші жағынан, CSS трансформацияларының көмегімен формада фигураңызды бөлуге тура келетіндіктен, мәтіннің басқа элемент бойынша үстінен қабаттасып, мәтінді қисайтпау керек. Тағы да браузерлердің қолдауына кепілдік берілмейді.

1
қосылды