Плосък остър ъгъл или скосени ъгли

Има ли някакъв начин да създадете остър плосък ъгъл с CSS и HTML?

Нещо като това:

  ____
 /    \
 |    |
 \____/

html css css-shapes
person AturSams    schedule 04.06.2012    source източник

Отговори (4)


arrow_upward
26
arrow_downward

Вижте тук. Там ще намерите всичко необходимо:

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

Редактиране В случай, че връзката се загуби:

CSS

#octagon { 
  width: 100px; 
  height: 100px; 
  background: red;  
  position: relative; 
} 

#octagon:before { 
  content: ""; 
  position: absolute;  
  top: 0; left: 0; 
  border-bottom: 29px solid red; 
  border-left: 29px solid #eee; 
  border-right: 29px solid #eee; 
  width: 42px; height: 0; 
} 

#octagon:after { 
  content: ""; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  border-top: 29px solid red; 
  border-left: 29px solid #eee; 
  border-right: 29px solid #eee; 
  width: 42px; 
  height: 0; 
}
person Sven Bieder    schedule 04.06.2012
comment
Но сега не получихте приетия отговор. Срам. Вашият е по-добър. - person Mr Lister; 04.06.2012
comment
Не е проблем. Когато другият отговор работи по-добре за него, тогава всичко е наред. В крайна сметка става въпрос да помагаме на хората, а не кой да бъде приет. - person Sven Bieder; 04.06.2012
comment
Да, но е и за подпомагане на хората, които търсят в този сайт в бъдеще. Ако видят другите отговори приети, може да си помислят, че този е по-добрият с 4-те допълнителни div. О, добре. - person Mr Lister; 04.06.2012
comment
@SvenBieder, надявам се, че не си ядосан, че откраднах приетия ти отговор, това не беше моето намерение. Приех идеята ви и просто ми беше любопитно дали мога да го направя по начина, по който смятам за добре - person Dejan; 05.06.2012
comment
@MrLister, искаш ли да споделиш защо това е по-добре? Не казвам, че грешите, просто се надявам да науча нещо. Досега виждам, че решението тук работи, но само за div, които са с фиксиран размер от 100x100, докато моето работи за всички ширини и височини. И разбира се, бих могъл да намаля броя на допълнителните div с помощта на съдържание и псевдо селектори, но тогава губя поддръжката на IE7 и по-долу - person Dejan; 05.06.2012
comment
@dDejan Не, нямам причина да се сърдя. Различни пътища водят до целта. Кой е най-добрият начин за питащия е негово решение. Както казах, целта може да не е да се получи приетият отговор. Тук съм, за да помогна, като покажа начин, който бих избрал. - person Sven Bieder; 05.06.2012
comment
@dDejan Това е по-добро с това, че не използва допълнително маркиране. Маркирането е за съдържанието, CSS е за това как изглежда. И си прав за фиксираните размери, но ако все пак ще използваш Javascript, можеш да промениш и размерите с това. - person Mr Lister; 05.06.2012
comment
@dDejan Ето jsFiddle, който не разчита на размерите 100x100 и без Javascript. Не работи в IE7 обаче... - person Mr Lister; 05.06.2012

arrow_upward
10
arrow_downward

Ето моето решение, използвайки CSS формите от Chris Coyier.

http://jsfiddle.net/dDejan/XSs9L/

4 допълнителни div се вмъкват чрез JavaScript (е, всъщност jQuery) за всеки от вашите контейнери, които искате да бъдат оформени по този начин. Тези div са позиционирани абсолютно в ъглите на своя родител и са стилизирани по съответния начин, както е описано във връзката, публикувана от Sven Bieder

person Dejan    schedule 04.06.2012
comment
Добре е да знам @VladimirStarkov, благодаря за този проницателен коментар :) - person Dejan; 05.06.2012

arrow_upward
3
arrow_downward

Можете да съставите това, като използвате абсолютно позиционирани :before и :after елементи, като използвате CSS триъгълници техника.

<div class="box"></div>

css:

.box {
   background-color:#2020ff;
   height:50px;
   width:50px;
   position:relative   
}

.box:after {
    content:" ";
    width: 0;
    height: 0;
    border-top: 10px solid #ffffff;
    border-bottom: 10px solid transparent;
    border-right:10px solid #ffffff;  
    position:absolute;
    top:-9px;
    right:0px;

}
person Diodeus - James MacFarlane    schedule 04.06.2012
comment
Това изглежда добре, но бихте ли обяснили кода? Не разбирам напълно как работи? - person AturSams; 04.06.2012
comment
Това е стар трик да се направи триъгълник от ъгловото парче на границата. В този случай това е бял триъгълник, който покрива част от синята кутия. Можете да редактирате настройките в :after, за да видите как работи. Използвайте друг с :before, за да покриете горния ляв ъгъл. Ето как работи: stackoverflow. com/questions/7073484/ - person Diodeus - James MacFarlane; 04.06.2012

arrow_upward
1
arrow_downward

Ето цялостно решение за цялата кутия. Той мащабира въз основа на размера на съдържанието, както бихте очаквали от обикновен div. И можете лесно да го преоразмерите със свойството за височина и ширина, без да се налага да бърникате с нищо друго. Това е модифицирана версия на този codepen.

div {
  padding: 5px;
  margin: 40px auto;
  width: 230px;
  background: rgba(47,51,54,1); /* fallback */
  background:
        -moz-linear-gradient(45deg,  transparent 7px, rgba(47,51,54,1) 7px),
        -moz-linear-gradient(135deg, transparent 7px, rgba(47,51,54,1) 7px),
        -moz-linear-gradient(225deg, transparent 7px, rgba(47,51,54,1) 7px),
        -moz-linear-gradient(315deg, transparent 7px, rgba(47,51,54,1) 7px);
  background:
        -o-linear-gradient(45deg,  transparent 7px, rgba(47,51,54,1) 7px),
        -o-linear-gradient(135deg, transparent 7px, rgba(47,51,54,1) 7px),
        -o-linear-gradient(225deg, transparent 7px, rgba(47,51,54,1) 7px),
        -o-linear-gradient(315deg, transparent 7px, rgba(47,51,54,1) 7px);
  background:
        -webkit-linear-gradient(45deg,  transparent 7px, rgba(47,51,54,1) 7px),
        -webkit-linear-gradient(135deg, transparent 7px, rgba(47,51,54,1) 7px),
        -webkit-linear-gradient(225deg, transparent 7px, rgba(47,51,54,1) 7px),
        -webkit-linear-gradient(315deg, transparent 7px, rgba(47,51,54,1) 7px);
  xbackground:
        linear-gradient(45deg,  transparent 7px, rgba(47,51,54,1) 7px),
        linear-gradient(135deg, transparent 7px, rgba(47,51,54,1) 7px),
        linear-gradient(225deg, transparent 7px, rgba(47,51,54,1) 7px),
        linear-gradient(315deg, transparent 7px, rgba(47,51,54,1) 7px);
}

div {
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

p {
  border-left: none;
  border-right: none;
  color: #ccc;
  margin: 0;
  min-height: 40px;
  padding: 10px;
  position: relative;
}
<div>
  <p>Here is some content.</p>
</div>

https://codepen.io/c0n5/pen/vYyRPVZ

person Constantin    schedule 01.03.2021