Javascript-форум - можно ли изменить цвет ссылок? и одну ссылку заменить на текст?

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - можно ли изменить цвет ссылок? и одну ссылку заменить на текст? (https://javascript.ru/forum/misc/76934-mozhno-li-izmenit-cvet-ssylok-i-odnu-ssylku-zamenit-na-tekst.html)

Цитата:

Сообщение от Блондинка (Сообщение 505498)

ну точно, я угадала, все увидев меня срочно ретируются

неужели я была права?

Цитата:

Сообщение от Блондинка (Сообщение 506293)

Никто не знает почему фон не обрезается?

???

Malleys,
А если использовать

clip-path: poligon(0 0, 100% 0, 100% 90%, 50% 100%, 0 80%);

возможно ли совместить с бордер радиус для верхних прямых углов и у дива установить фон, а у нижних обрезанных углов обрезать и фон?

Цитата:

Сообщение от Блондинка

???

Что значит, что фон не обрезается? Вы можете использовать CSS-свойства clip-path или mask. Мощнейшие возможности по обрезанию! Также вас возможно заинтересует свойство shape-outside

UPD

Цитата:

Сообщение от Блондинка

Всё можно, если я правильно понял, то можно так... Зачем вы спрашиваете то, что и так знаете?

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

.box {
	width: 320px;
	height: 240px;
	background: linear-gradient(to bottom, transparent, red), url(https://picsum.photos/320/240) center / cover;
	border-radius: 1em;
	clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}
    
</style>

Malleys,
в 168 посте, как лучше и кроссбраузерно сделать?

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

.box {
	width: 320px;
	height: 240px;
	border: 5px solid #000;
        box-shadow: 5px 5px #000;
        background: linear-gradient(to bottom, transparent, red), url(https://picsum.photos/320/240) center / cover;
	border-radius: 1em;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
       clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}
    
</style>

я то думала почему не обрезали, а про префиксы забыла...

Malleys,
как сделать бордер вокруг видимой области а не по всему блоку?

Цитата:

Сообщение от Блондинка

как сделать бордер вокруг видимой области а не по всему блоку?

border предназначен для работы с прямоугольной областью, как работать с любой областью я вам показывал полгода назад!

Предыдущий пример можно доделать так...

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

.box {
	width: 320px;
	height: 240px;
	background: yellowgreen;
	border-radius: 1em;
	clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
	position: relative;
}

.box::before {
	all: inherit;
	content: "";
	display: block;
	transform: scale(0.9);
	background: url(https://picsum.photos/320/240) center / cover;
	position: absolute;
}
    
</style>

Если вам нужна более настраиваемая рамка, то используйте svg...

<style>
svg.box {
	width: 320px;
	height: 240px;
}
</style>
<svg viewBox="-5 -5 330 250" class="box">
	<style>
		path {
			stroke: tan;
			stroke-width: 10px;
			fill: url(#img1);
		}
	</style>
	<defs>
  		<pattern id="img1" patternUnits="userSpaceOnUse" width="320" height="240">
    			<image xlink:href="https://picsum.photos/320/240/" x="0" y="0" />
  		</pattern>
	</defs>
	<path d="M 20 0 h 280 a 20 20 0 0 1 20 20 v 190 l -160 30 l -160 -30 v -190 a 20 20 0 0 1 20 -20 z"></path>
</svg>

÷а ну нахфик, второй день пытаюсь что-то сделать, и нифига не получается,.. или радиус не совпадает у обоих верхних углов, или левый нормально а правый не совпадает, или фон у нижних углов не обрезается, или...
видно ничего не получится у меня...

Наконец-то получилось то что хотела, блок с серым фоном, и сделала даже лучше чем ожидала - блок с зелёным фоном

<!DOCTYPE html>
<html lang="ru">
<head>
<style>
.box {
width: 150px;
height: 50px;
display: inline-block;
background: #999;
border: 1px solid #999;
border-radius: 8px/5px; 
-webkit-clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 50px, 0 35px);
clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 50px, 0 35px);
}
.block {
width: 148px;
height: 48px;
background: #e1e1e1;
border: 1px solid transparent;
border-radius: 7px/4px; 
position: absolute;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33px, 50% 48px, 0 33px);
clip-path: polygon(0 0, 100% 0, 100% 33px, 50% 48px, 0 33px);
text-align: center;
padding-top: 10px; }

.box_01 {
width: 150px;
height: 50px;
display: inline-block;
background: #008000;
border: 1px solid #008000;
border-radius: 8px/5px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 50px, 0 35px);
clip-path: polygon(0 0, 100% 0, 100% 35px, 50% 50px, 0 35px);
}
.block_01 {
width: 148px;
height: 48px;
background: #cfc;
border: 1px solid transparent;
border-radius: 7px/4px; 
position: absolute;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33px, 50% 43px, 0 33px);
clip-path: polygon(0 0, 100% 0, 100% 33px, 50% 43px, 0 33px);
text-align: center;
padding-top: 10px; }
</style>
</head>
<body>
<div class="box">
<div class="block">
<a>0001</a>
</div>
</div>
<div class="box_01">
<div class="block_01">
<a>0002</a>
</div>
</div>
</body>
</html>